效果圖

配置


使用方法

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

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

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

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、參數(shù)詳解
elem: 指定元素
url: 請求路徑
template_val: 選中后指定元素顯示的值
template_txt：列表顯示模板
onselect: 選中時執(zhí)行的callback事件，會返回當(dāng)前選中項(xiàng)的數(shù)據(jù)

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

5、返回數(shù)據(jù)格式


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