可輸入選擇的下拉框非同步程式設計

在實際開發開發中我們會用到各種瀏覽器、html、js等提供的原生的元件/介面，但是這樣並不一定滿足我們的要求，所以我們需要自己寫一些我們需要的元件。平常我們會經常用

`select` 標籤做下拉選項，不過這個只能選擇不能手動輸入，當然網上也有很強大的select2外掛程式，如果只要輸入和選擇兩個功能的話那麼強大的功能並不是我們需要的。這篇文章我們就來寫乙個簡單實用的select

需求

需求很簡單我們要做的是兩個功能輸入和下拉選擇，為了互動體驗更好，我們需要做動畫和事件。保證互動的流暢。而且我們還需要做一些簡單的驗證來檢測非法輸入。

互動

首先，我們要先明白要寫那些事件，通過之前的gif 我們可以看到一共有三個事件，獲取焦點，焦點事情，點選事件。除了事件，還需要做一些過度，如果對相容性沒有嚴格要求的話（ie低版本）過度用css就好了。如果對相容性有嚴格要求那麼就用js來寫。這裡的是用css3的 `transition` 來做乙個0.3秒的過渡

驗證

具體實現

知道要做什麼了你們就直接上**吧，這裡js是重點，所有我先貼html結構和js，css最後放。html結構

這裡的li列表可以寫死可以動態渲染。data-value是用來存資料的，比如資料的id或者其他的什麼。data-height是用來存ul的高度的，主要是過度動畫需要

獲取焦點事件（focus）

這個事件的邏輯是獲取焦點->如果使用者還沒輸入那麼把輸入框清空方便使用者輸入 ->根據列表數計算ul高度存入data-height屬性裡->然後設定高度，css會自動出現過度效果

$('body').on('focus ','.caninpselection',function () 
if(ul.data('height') == '')
var ch = ul.css('height')
var dh = ul.data('height')
if(ch == '0px')
})

失去焦點事件（blur）

這裡的邏輯很簡單如果使用者沒有輸入就設定預設值0，否則就判斷，然後`非同步

`執行關閉下拉事件。

$('body').on('blur ','.caninpselection',function () else
}settimeout(function () ,100)
})

點選事件（click）

點選事件就是賦值加關閉

$('body').on('click ','.select li',function () )

解bug-非同步程式設計

元件化

對於元件化我覺得要根據實際工作環境來說：如果用框架的可以用框架的方式來，比如ng的directive或者vue的directive之類的。如果不用框架用了underscore之類的工具庫，也可以用_.template來寫通用的。如果都不用，也可以用物件導向的方式抽出來。這個元件化，根據實際開發環境來，仁者見仁智者見智。如果要寫成元件的話，正規表示式最好作為引數傳進去。我這裡只提供思路，並不難。

css

其實css沒啥可以根據自己公司的風格隨便改。這裡最主要的就是下面這段css

-webkit-transition: height ease-out .3s;
transition: height ease-out .3s;

transition height 就是根據height的程式設計做過度用時300毫秒。值得注意的是 transition 所根據的屬性必須是具體值，比如auto就不可以。而且這個元素也必須存在，不然也不會有效果。下面是完整css

div,ul,li,input

ul .caninpselection

.caninp

.select

.select li

.select li:last-child

.select li:first-child

總結

縱觀整個元件，思路理清楚了其實並不難，我覺得最有意思的就是用`settimeout` 來做非同步處理了。

可輸入選擇的下拉框非同步程式設計

可輸入的下拉框

可輸入的下拉框

可輸入的下拉框

可輸入 選擇的下拉框 非同步程式設計

可輸入的下拉框

可輸入的下拉框

可輸入的下拉框

相關推薦

可輸入選擇的下拉框非同步程式設計