layui 文本自动填充

layui 插件地址:点我

js代码:

layui.config({
    base: '../layui/autocomplete/'  // 自己autocomplete文件路径
    , version: false,
    debug: false,
});

layui.use(['jquery', 'autocomplete'], function () {
    var $ = layui.jquery,
        autocomplete = layui.autocomplete;
    autocomplete.render({
        elem: $('#end'),
        cache: true,
        url: '/static/data.json',
        response: {code: 'code', data: 'data'},
        template_val: '{{d.name}}',
        template_txt: '{{d.name}} <span class=\'layui-badge layui-bg-gray\'>{{d.pinyin}}</span>',
        onselect: function (resp) {
            $('#content1').html("NEW RENDER: " + JSON.stringify(resp));
        }
    })
});

  

html代码:

<input type="text" name="number" id="end" autocomplete="off" class="layui-input" placeholder="目的地">

data数据格式:

{
  "code": 0,
  "data": [{
    "id": "2",
    "consignee": "test",
    "phone_number": "18079775521",
    "address": "test"
  }, {
    "id": "3",
    "consignee": "zzzzzzzz1",
    "phone_number": "18079775321",
    "address": "test"
  }, {
    "id": "4",
    "consignee": "fffffffffffffff",
    "phone_number": "15078977897"
  }, {
    "id": "5",
    "consignee": "te",
    "phone_number": "18079175321",
    "address": "dsa"
  }, {
    "id": "6",
    "consignee": "zzzffff",
    "phone_number": "18079775511",
    "address": "dsadas"
  }],
  "msg": ""
}

  

 

posted @ 2019-06-22 11:41  代码创造一切  阅读(8330)  评论(0编辑  收藏  举报