Layui-select 修复搜索之后上下键的bug

写在前面

真的只能是月更了。上个月随着解决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所有事件的代码，源代码有注释，很容易找到上下键的事件代码。

接着再找到setThisDd这个函数。

可以发现它通过元素“dd”得到当前队列元素。那我们就可以在这里改为：筛选不含有“layui-hide”这个class的“dd”元素，所以更改如下：

就是做一下这个改动，就可以实现按上下键仅在被筛选出来的选项中查找的效果啦。
先前我们举的栗子，筛选出来【1，3，5，6】之后，按第三下就直接可以选到“5”啦。

最后

久久一更，希望对你有帮助。

注：需转载请联系作者。