layui ios 搜索框 问题 layui 下拉搜索

　　LAYUI好像不维护了啊啊啊，但是我觉得这个优化思路还是值得借鉴的，共勉。

　　背景：LAYUI SELECT标签加上 lay-search属性就可以实现下拉的搜索功能，但是实际这个比较鸡肋，第二次搜索的时候搜索框内容不会置空，只有单一选项的时候还需要下拉选择上才能回车选中。

这边针对这两项进行优化。工具 idea 2019.3

　　步骤：

　　　　1、打开form.js,因为是有压缩的，所以可以使用ctrl+alt+L对代码进行格式化。没有用idea的小伙伴也可以找网页在线格式化就好，这样修改起来方便好多，也可以留下明显的修改记录。我的格式化后大致如图，可能会略有差异不影响。

　　　　

 

　　2、修改再次点到搜索框是内容清空的问题。其实封装的代码读起来还是有点困难的，所以需要结合前端调试。后续我找到大概在78行m的click方法里面，将框的内容置空就好了，这一块改起来还是比较简单的。大致的代码位置如图

 

 在这个方法里面加一条k.val('');即可。如图

 

 3、如果搜索后只有一个选项，默认该选项的优化。优化后操作体验有提升

修改的代码块在72行T方法里面，这个是输入搜索内容执行的方法。

 

 修改后的代码情况

 

 

　　这一块的代码我贴一下。

T = function () {
                                /* modify begin          **/
                                /**
                                 * V.1.1优化  当搜索返回选项只有一条时，默认选择该项
                                 * 1、获取所有下拉项
                                 * 2、获取搜索后隐藏的下拉项(搜索过滤掉的)
                                 * 3、判断过滤后是否只有单一选项 if(ds.length == os.length + 1)
                                 * 4、之前有选择且搜索被剔除的选项，需将class有layui-this layui-hide 修改为layui-hide
                                 * 5、搜索返回的单一选项之前未被选择则class为空，将其class置未layui-this
                                 */
                                var ds = g.children('dd');
                                var os = g.children('dd.' + o);
                                if(ds.length == os.length + 1) {
                                    //  搜索选项只有一个的情况
                                    for(var iu = 0; iu < ds.length; iu ++) {
                                        var cn = ds[iu].className;
                                        if(cn.indexOf(o) > -1 && cn.indexOf(s) > -1) {
                                            //  搜索剔除且之前选择的
                                            ds[iu].className = o;
                                        } else if(cn.length == 0) {
                                            //  单一选项且之前未被选择
                                            ds[iu].className = s;

                                        }
                                    }
                                }
                                /* modify end          **/
                                var e = g.children("dd." + s);
                                if (e[0]) {
                                    var t = e.position().top, i = g.height(), a = e.height();
                                    t > i && g.scrollTop(t + g.scrollTop() - i + a - 5), t < 0 && g.scrollTop(t + g.scrollTop() - 5)
                                }
                            };

View Code

　　这里我做个小小总结吧，各位小伙伴遇到任何问题都不要慌，慢慢来，仔细思考都能解决的，心不浮气不躁，我们能行的，在工作中不断提升自己，生活不也就是这样。

　　行吧，也没有特别多的细节。如果再遇不到你，祝你早安，午安，晚安。