帶搜索功能的下拉框

平時我們逛淘寶、上百度等地方經常會用到在輸入框中輸入一個字或者一個詞時，輸入框下面的下拉框的選項就會出現與輸入框輸入值類似的字符串，這就是一個根據輸入框輸入值來模糊查詢，也就是聯想下拉框。

從上面我們可以對比看出，輸入框在沒輸入數據之前下拉框選擇項是所有的選擇項，在輸入框輸入數據之後就會對下拉框選擇項進行篩選

從上圖我們看得出熒光筆塗鴉部分是一個datalist標籤。

介紹一下datalist標籤： dataList 控件是用於顯示限制於該控件的項目的重複列表，它是屬於ASP.NET的控件。就是説在input標籤中輸入值，會顯示出option 標籤的value相似的值。Input標籤和datalist控件能夠聯繫的主要原因是在input標籤上調用了datalist（上圖紅色圈中部分），如果不調用就不會有選擇項。上面是手寫的聯想下拉框，但是它還不夠完善，選項是侷限性的只能在它原有的那麼幾項數據中選擇數據，所以需要換一下思維將聯想下拉框做好一些，我們可以使用layui插件來進行補充。Layui插件中自帶了一個帶搜索功能的選擇框，通過layui插件設定屬性 lay-search 來開啓搜索匹配功能。

Layui插件中的源碼（申明：上圖的源代碼是來源於layui文檔的源代碼，並非本人原創）

可以對比效果看個人喜好，選擇自己更喜歡的效果。上圖左側是直接使用layui插件中的 lay-search 屬性的效果示意，右側是使用了其他jQuery基於layui插件的插件。

插件下載路徑：https://www.lanrenzhijia.com/jquery/8673.html 或者直接輸入 jQuery基於Layui下拉框搜索提示列表代碼