對頁面多級列表遍歷實時更新搜尋結果的搜尋框

背景

由於公司管理平台的menu的管理功能過多，於是要做乙個搜尋框，最終實現的搜尋框會顯示列表之間的層級關係，不用點選按鈕便出現結果，實時響應更新搜尋結果，呈現結果如下：

2. 思路

專案是php的mvc框架，功能列表的展示不是通過呼叫介面拿到資料然後渲染的，接收從controller傳回來的乙個data，直接 echo $menulist，$menulist是一段拼接好的html字串。可以有兩種方法拿到我們需要的陣列（包含各個menu標題和href），一是在controller裡面定義乙個searchlist，在modal裡面查詢返回，但是此舉需要訪問資料庫，為了減輕伺服器的負擔，不進行考慮；二是在前端頁面進行dom節點的遍歷，組裝好我們需要的menulist，然後進行遍歷，得到搜尋結果。

#searchbox

#searchbox:focus

#searchtitle

#searchbox input:focus

input::-webkit-input-placeholder

#column-left.active #searchbox input:-moz-placeholder

input::-moz-placeholder

input:-ms-input-placeholder

#search-icon

.toast-wrap

.toast-msg

.toastanimate

@keyframes toastkf

50%

100%

}.hidesearchbox

.beforesearch

.aftersearch

.aftersearch li a

.tooltip

需要搜尋的列表是ul>li，li>a+ul（只有最後一層列表的a標籤才帶有href，只有非最後一層列表才有ul），每個ul是一層列表。這裡生成的menulist是樹形的，後續進行搜尋匹配的時候會逐層進行遍歷，確保不會漏掉，還有另外一種實現方式，即生成扁平的menulist，最後遍歷只需要遍歷一遍然後再對遍歷結果進行篩選，即可。

//方法一
$('#menu>li').each(function
() );
} else
); } 
else
); })
child2array.push();}})
menulist.push();
}})} 
//方法二

$('#menu>li').each(function () );  //一級
} else );
} else );})}
})}})

var searchkey = '';
var menusearch = function
() 
for (let i = 0; i) );
} else
if(menulist[i].childs[0].href) );
} else);}}
if(menulist[i].childs));
} else
); }
}if(child2[j].childs));}}
}}}else
{} }
boolfirst = true
; 
//展示
if((searchresult.length>0) && (searchkey.length>0))
$("#searchresult").removeclass("beforesearch").addclass("aftersearch")
//跳轉
$('#searchresult>li').on('click',function
(event) );}}

我們希望在輸入完關鍵字就進行結果的展示，不必點選觸發，可以使用bind給選定的元素進行事件繫結，bind的詳細用法請移步

//
觸發搜尋功能 
$('#searchtitle').bind("input propertychange focus",function
(event) 
menusearch();
if(searchkey.length>0),1000);
}});
$('#searchtitle').on('click',function
(event) );
$('#search-icon').on('click',function
(event) 
});

propertychange 是ie專屬用於動態監聽監聽輸入框的值變化，input是標準的瀏覽器事件，一般應用於input輸入框，當input的值發生變化就會發生，無論是鍵盤輸入還是滑鼠黏貼的改變都能及時監聽到變化，兩者一起用是為了相容ie9以下input不相容的問題。

搜尋結果列表的開啟和閉合，當點選除了結果列表和searchbox以外的介面的時候，關閉搜尋結果列表。**如下：

$('#searchtitle').bind("input propertychange focus",function
(event) );
$('#searchtitle').on('click',function
(event) );
$('#search-icon').on('click',function
(event) 
});$(document).on('click',':not(#searchresult)',function
(e) });

需要注意到的是，這裡用到了event.stoppropagation(); 原因是在用:not選擇器進行操作時，只能選取一項內容進行篩選（網上查詢說：not選擇器需要進行多項條件篩選用英文半形符號分割，試過沒用...），那麼就要對子元素和其他元素的click時間新增防止事件穿透的操作event.stoppropagation() 。這裡的menusearch()是我將上面的查詢匹配過程封裝成了乙個function。

3. 優化

禁止換行：white-space:nowrap;

將超出寬度的內容隱藏起來：overflow:hidden;

將超出寬度的內容用省略號表示：text-overflow: ellipsis;-o-text-overflow:ellipsis;

需要特別注意的乙個點是，需要設定 i 標籤的的display屬性為block，i 標籤是行內標籤，在其上設定寬高都不起作用，所以上述有關寬度的限制和設定，overflow:hidden; text-overflow: ellipsis;-o-text-overflow:ellipsis;都會失效，

showstr += 'display: block;border-bottom: none; white-space:nowrap; overflow:hidden; text-overflow: ellipsis;-o-text-overflow:ellipsis; cursor:pointer;\" href=\"'
+searchresult[i].href+'\">'+searchresult[i].title+'
';

4. 總結需求很小，涉及到的知識點都較為基礎，一點一滴慢慢積累吧。下面是全部**：

對頁面多級列表遍歷實時更新搜尋結果的搜尋框

Word 多級列表

Bootstrap多級下拉列表

多級下拉列表的JavaScript

對頁面多級列表遍歷 實時更新搜尋結果的搜尋框

Word 多級列表

Bootstrap多級下拉列表

多級下拉列表的JavaScript

相關推薦

對頁面多級列表遍歷實時更新搜尋結果的搜尋框