https://www.cnblogs.com/leohui/p/654d.html

?

可以輸入也可以下拉選擇的select

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

查看演示?下載源碼

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

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

下面是一個(gè)基本的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

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

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

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

選項(xiàng)設(shè)置

filter：過濾，即當(dāng)輸入內(nèi)容時(shí)下拉選項(xiàng)會(huì)匹配輸入的字符，支持中文，true/false，默認(rèn)true。

effects：動(dòng)畫效果，當(dāng)觸發(fā)彈出下拉選擇框時(shí)的下拉框展示過渡效果，有default，slide，fade三個(gè)值，默認(rèn)是default。

duration：下拉選項(xiàng)框展示的過渡動(dòng)畫速度，有fast，slow，以及數(shù)字（毫秒），默認(rèn)是fast。

事件

onCreate：當(dāng)輸入時(shí)觸發(fā)。

onShow：當(dāng)下拉時(shí)觸發(fā)。

onHide：當(dāng)下拉框隱藏時(shí)觸發(fā)。

onSelect：當(dāng)下拉框中的選項(xiàng)被選中時(shí)觸發(fā)。

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

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

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

jQuery Editable Select項(xiàng)目官網(wǎng)地址：https://github.com/indrimuska/jquery-editable-select

原文鏈接：http://www.helloweba.com/view-blog-348.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的可以输入也可以下拉选择的select的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。