效果圖

配置


使用方法

1、加載
把 autocomplete.js 放入你全局配置第三方組件加載庫里； （官方參考）https://www.layui.com/doc/base/infrastructure.html#config
autocomplete.css：autocomplete.js中有默認的自動(dòng)加載地址，可把

layui.link('/resource/css/autocomplete.css'); 

改成自己的加載路徑或刪除掉頁(yè)面直接加載

2、配置

autocomplete.render({
            elem: $('#example')[0],
            url: 'example_request_url',
            template_val: '{{d.consignee}}',
            template_txt: '{{d.consignee}} <span class=\'layui-badge layui-bg-gray\'>{{d.phone_number}}</span>',
            onselect: function (resp) {
                
            }
        })

3、參數詳解
elem: 指定元素
url: 請求路徑
template_val: 選中后指定元素顯示的值
template_txt：列表顯示模板
onselect: 選中時(shí)執行的callback事件，會(huì )返回當前選中項的數據

4、文本交互參數名為keywords，例：http://xxx.com/#urii#?keywords=#val#

5、返回數據格式


注：發(fā)現很多人用到這個(gè)插件有問(wèn)題，論壇里我不經(jīng)常來(lái)看，如果有問(wèn)題可以加下我QQ 2725629672，請附加上LAYUI AUTOCOMPLETE