我們知道，一般select下拉框是只能選擇的，不能用來輸入內(nèi)容的。而有時我們會遇到下拉框中沒有要選擇的信息項或者下拉選項特別多時，我們可以讓select變成text，允許用戶輸入想要的內(nèi)容，同時還可以在輸入的時候?qū)P(guān)鍵字的項也列出來，供快速選擇。

查看演示效果            源碼下載

本文將用實例和大家分享一款基于jQuery的下拉框插件，它允許用戶輸入內(nèi)容，同時下拉選項中會及時匹配相關(guān)選項，支持鍵盤操作，還支持html選項內(nèi)容，當(dāng)然還能讓下拉的過程帶有動畫效果。我們來看下如何使用。

HTML結(jié)構(gòu)

下面是一個基本的select下拉框。

<select id="editable-select"> <option>Alfa Romeo</option> <option>Audi</option> <option>中國人民銀行</option> <option>中國人民</option> <option>中國</option> <option>BMW</option> </select> 

此外還需要加載jQuery庫和jquery.editable-select.js文件，在源碼下載包里已經(jīng)有了。

jQuery

只需要以下代碼就能實現(xiàn)傳統(tǒng)的下拉框變成有輸入功能的下拉框了。

$('#editable-select').editableSelect({ effects: 'slide' }); 

其實我們細(xì)看插件代碼就會發(fā)現(xiàn)，作者是將原有的select處理了下，變成了一個輸入表單text和一個列表ul。這樣text可以輸入，下拉選項則用ul面板，這樣一來ul里的選項就可以添加任意html代碼了，demo中有示例。然后通過使用CSS以及js技術(shù)可以實現(xiàn)下拉彈出、輸入查找匹配功能。

選項設(shè)置

filter：過濾，即當(dāng)輸入內(nèi)容時下拉選項會匹配輸入的字符，支持中文，true/false，默認(rèn)true。
effects：動畫效果，當(dāng)觸發(fā)彈出下拉選擇框時的下拉框展示過渡效果，有default，slide，fade三個值，默認(rèn)是default。
duration：下拉選項框展示的過渡動畫速度，有fast，slow，以及數(shù)字（毫秒），默認(rèn)是fast。

事件

onCreate：當(dāng)輸入時觸發(fā)。
onShow：當(dāng)下拉時觸發(fā)。
onHide：當(dāng)下拉框隱藏時觸發(fā)。
onSelect：當(dāng)下拉框中的選項被選中時觸發(fā)。

事件調(diào)用方法：

$('#editable-select').editableSelect({ onSelect: function (element) { alert("Selected!"); } }); 

以上內(nèi)容給大家分享了核心代碼，需要源碼的朋友可以直接下載哦。