LAYUI SELECT下拉搜索優化

　　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)
                                }
                            };

　　這里我做個小小總結吧，各位小伙伴遇到任何問題都不要慌，慢慢來，仔細思考都能解決的，心不浮氣不躁，我們能行的，在工作中不斷提升自己，生活不也就是這樣。

　　行吧，也沒有特別多的細節。如果再遇不到你，祝你早安，午安，晚安。

　　若想與我談些人生大事請評論或郵件[e-mail] ，等你哈。