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

2022-06-16 16:57:12 字數 2282 閱讀 8748

在實際開發開發中我們會用到各種瀏覽器、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` 來做非同步處理了。

可輸入的下拉框

可輸入的下拉框 title head body divstyle position relative span style margin left 100px width 18px overflow hidden select style width 118px margin left 100px ...

可輸入的下拉框

可輸入的下拉框 title p head p body p p div style position relative p span style margin left 100px width 18px overflow hidden p select style width 118px margi...

可輸入的下拉框

一 碎碎念 是我的第一篇博文,事實上我的草稿箱裡不止這一篇。技術方面對自己沒什麼信心,總想反覆推敲將所有的問題考慮到再發表,可是所謂的 所有問題 總是那麼多 又沒有誰規定一定不能犯錯 寫的好方便大家學習交流,寫的不好也請大家多多提意見,共同學習 go 二 製作乙個可輸入又可選擇的下拉框 解題思路 1...