如何實現可以輸入也可以下拉選擇的select

這篇文章給大家分享的是有關如何實現可以輸入也可以下拉選擇的select的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

HTML結構

下面是一個基本的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文件，在源碼下載包里已經有了。

jQuery

只需要以下代碼就能實現傳統的下拉框變成有輸入功能的下拉框了。

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

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

選項設置

filter：過濾，即當輸入內容時下拉選項會匹配輸入的字符，支持中文，true/false，默認true。

effects：動畫效果，當觸發彈出下拉選擇框時的下拉框展示過渡效果，有default，slide，fade三個值，默認是default。

duration：下拉選項框展示的過渡動畫速度，有fast，slow，以及數字（毫秒），默認是fast。

事件

onCreate：當輸入時觸發。

onShow：當下拉時觸發。

onHide：當下拉框隱藏時觸發。

onSelect：當下拉框中的選項被選中時觸發。

事件調用方法：

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

此外，還支持鍵盤方向鍵、回車鍵、Tab鍵以及Esc鍵操作。

jQuery Editable Select項目官網地址：https://github.com/indrimuska/jquery-editable-select

感謝各位的閱讀！關于“如何實現可以輸入也可以下拉選擇的select”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！