Layui
layui（諧音：類UI) 是一款采用自身模塊規范編寫的前端 UI 框架。親測很好用，很好看。
官網：http://www.layui.com/
github：https://github.com/sentsin/layui
插播一條相關博客：Layui-select 修復搜索之后上下鍵的bug
研究select搜索功能的實現
layui的select組件自帶搜索功能，只要在select標簽里面添加屬性search=""即可。
但是如果選項非常多，很多人會想，如果能夠用拼音快速地搜索匹配就更好了，我只要輸入拼音前面幾個字母，就能夠快速匹配到我想要的選項。但是這個功能Layui的select沒有幫我們實現。
沒關系，我們來讀讀它的源代碼，很快就能找到搜索功能是怎么實現的，我們在這里自己加上我們的代碼就可以實現啦。
此時注意：這里的源代碼指的是原始代碼。我們從官網下載下來的js文件都是經過壓縮的，所以你如果直接打開form.js文件進行解讀並修改你會暈倒到電腦前的。所以你可以前往github拷貝下form.js文件進行修改，github上的文件都是源文件哦。
首先毫無疑問，select組件的功能就是放在form.js里面啦。
我們可以看到select的搜索功能中，調用了一個叫notOption的函數來判斷是否有匹配的選項。
我們找到這個函數之后，發現判斷輸入內容與各選項是否匹配的是這個語句：
那我們就可以從這個語句入手啦。
開始動手解決
之前在使用easyUI框架的時候，我也動手實現過它的select下拉框拼音搜索功能。因此，結合上一次的實現，這一次根據layui的select組件的dom實現特點做一些改動。（有機會寫一個easyUI的實現方法，只是easyUI的解決方法還是挺多
的，可以根據自己的實際需求做改動）
一、引進插件
首先我們要先引進一個pinyin.js文件，它是一個將漢字轉換為拼音的JavaScript插件，並且支持多音字，直接使用ConvertPinyin(text)獲取。http://www.uedsc.com/pinyin-js.html 這個網址是這個插件的介紹。
還要引進一個initials.js文件，它是提取漢字首字母的，返回的是一個大寫字母字符串組成的數組，當然這個數組只有一個元素。獲取時應正確使用：makePy(text)[0]。
為了方便，以上兩個已上傳到我的碼雲和github，CSDN資源庫也有，可前往下載：
碼雲：https://gitee.com/onionoo/pinyin.js
github：https://github.com/onionooO/ChineseToPinyinAndInitials
CSDN資源：全拼：https://download.csdn.net/download/sinat_39571186/10417956
首字母：https://download.csdn.net/download/sinat_39571186/10417947
二、修改代碼
我們將輸入值是否與選項匹配的not變量用一個函數myFilter來實現。在下圖這個位置改動一下代碼，同時添加一個獲取選項value的變量id：
接下來就是myFilter函數的實現了。在notOption函數上面加一個函數myFilter：
重點是在畫框框的這個判斷語句，可以根據自己的需求來實現。
ConvertPinyin(text).substring(0, len) === value 這句語句是為了實現拼音從頭到尾地匹配，這就要求你要全拼。匹配效果如下：
makePy(text)[0].toLowerCase().substring(0, len) === value 這句語句是實現首字母從頭到尾匹配，匹配效果如下：
這樣基本就能夠實現拼音全拼和首字母匹配了。（因為可能涉及到公司一些東西，所以就打了碼，能看懂就好。）
注意
順便一提，我們可以發現，Layui的select組件和普通的select並不一樣，它是用定義列表dl、dd來排列選項的。
這也是notOption函數中的dds的來歷以及對dds進行遍歷的原因，同時也是我選擇在源代碼里面做改動的原因。
我本來想要另外重寫一下那個notOption函數，盡量不要去改動源代碼的。然后我發現dds的獲取好像挺有講究的，在函數前面老遠老遠的地方，看圖：
然后我就放棄重寫了，除了我懶之外，還怕破壞一些東西，就直接在源代碼里面修改了。
補充：layui-select搜索出來之后存在一個上下鍵搜索的bug，解決請看另一篇博客：Layui-select 修復搜索之后上下鍵的bug
最后
還是貼一下代碼吧。建議還是讀一下源代碼，或看一下上面的內容，下次作者再次更新代碼的時候，就知道在哪個地方做修改了。
注意，第一步引入兩個文件，pinyin.js和initials.js。第二步，如果你引用的是layui.all.js文件，那么你就要改一下了，要改成引用layui.js文件哦。
有問題還可參考：https://blog.csdn.net/Eseberg/article/details/90934967?spm=1001.2014.3001.5501
————————————————
————————————————
——————原文鏈接——————
版權聲明：本文為CSDN博主「仰淳」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/sinat_39571186/article/details/80275578