layui 文本自動填充

時間 2019-11-22 標籤 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": ""
}