寫在前面

真的只能是月更了。上個月隨著解決layui-select的拼音搜尋之後，我解決的這個上下鍵的bug，一直拖到現在才有時間寫。
首先，如果你需要實現layui-select的拼音匹配搜尋的話，可以看我的上一篇部落格：Layui-select 下拉框實現拼音全拼匹配/首字母模糊搜尋。建議文章過程都看一遍，該從哪裡下載檔案、該去哪裡找form.js原始碼，文章裡都有提到。感謝支援！

開始正題

發現問題

上個月解決了拼音匹配的功能，老闆很高興，但是又馬上發現了另外一個問題。就是當我們搜尋匹配出來的選項要進行上下鍵查詢的時候，他還是在原來所有的選項裡上下跳躍。意思就是說，那些沒被篩選出來的選項也會參與其中，你可以去試一下，你會發現上下鍵好像失靈了一樣。
舉個栗子吧，比如說，我的全部選項有【1，2，3，4，5，6】，經過搜尋，篩選出【1，3，5，6】，這時你按down鍵查詢“5“，正常的應該按三下就可以了，但是事實上出現的情況是，按一下，到“1”，按第二下，沒有反應，按第三下，到“3”，直到按了第五下才到“5”，因為它的遍歷順序還是【1，2，3，4，5，6】。現在應該看懂是什麼問題了吧。

解決問題

看了一下程式碼，發現它在上下鍵按下的時候，是在當前的dd元素上加上一個class“layui-this”。注意此時沒有被篩選出來的選項有一個class是“layui-hide”。

按上下鍵的時候，它是按順序加上那個“layui-this”的。
所以，我們可以從這裡入手，找到這個按上下鍵的事件，對這個新增“layui-this”的dd元素進行一個篩選，即只要篩選處不含有“layui-hide”這個class的dd元素上就可以了。

修改程式碼

還是在原始碼上改，這樣以後就可以直接用了。原始碼在layui的Github上可以下載。
在form.js檔案中，找到select所有事件的程式碼，原始碼有註釋，很容易找到上下鍵的事件程式碼。

最後

久久一更，希望對你有幫助。

注：需轉載請聯絡作者。