js 實現列表搜尋使用者匹配功能

2022-08-29 02:18:11 字數 485 閱讀 9489

前言: 在專案開發過程中,遇到乙個需求,有乙個使用者列表,前端需要對使用者列表的值進行搜尋,並將搜尋匹配成功的值顯示出來;

在使用者列表上方的使用者進行輸入,顯示相應的值,

這是搜尋後的,注意,我在進行搜匹配的時候沒有區分大小寫;

search(calval) 

});console.log(this.matchingsuccess);

},注:  item.name.tolowercase().indexof(calval) != -1 中的 tolowercase()是不區分大小寫搜尋的關鍵; 整個搜尋關鍵在於利用字串的 indexof()方法進行依次匹配,匹配成功就壓入到需要顯示的陣列中去;

js實現搜尋顯示列表

現有這一需求,有一列表,乙個搜尋框,要求列表根據搜尋框內容顯示,效果如下 如下 實現思路 父元件是搜尋框 傳給子元件列表 需要顯示的內容 子元件遍歷列表 通過computed 計算屬性來拿到處理後的資料 用到的方法有str.tolowercase 轉化為小寫,indexof 根據字串判斷拿到索引,有...

js 搜尋框匹配

input li bigbox one ul 模擬假資料 var datas a abv jng abvt hjuy hj abvtry abvtryi 獲取input var textbox document.getelementbyid box var bigbox document.getel...

實現搜尋功能

準備檢視函式search 修改base.html 中搜尋輸入框所在的 form action method get input type text placeholder 搜尋從這裡開始.style width 180px margin left auto height 30px padding l...