實現原理:

利用js的 indexOf 方法可返回某個指定的字符串值在字符串中首次出現的位置。

模板中的代碼

<div class='search'><!--輸入框使用的是vant的輸入框組件--><van-search @input='autoSearch' v-model='value' placeholder='請輸入搜索關鍵詞' /> <span>搜索</span> </div><!--展示數據--><ulv-for='(item) in allArea' :key='item.communityId' > <li v-if='allNewArea.length != 0'>{{ item.communityName }}</li> <li v-else>{{ item.communityName }}</li></ul>

js代碼

getAreaDetail () { // 獲取數據 this.$http({ method: ’post’, url: ’/appProperty/getCommunity’, }).then(res => { this.allArea = res.data this.allNewArea = res.data }) }, autoSearch () { // 模糊搜索加節流（500ms觸發一次） var allowPass = true if (!allowPass) { return } setTimeout(() => { allowPass = false this.allArea = []; this.allNewArea.filter(item => { if (item.communityName.indexOf(this.value) !== -1) { // 此處也可使用js的 search 方法實現indexOf 一樣效果 this.allArea.push(item); } }) }, 500); },

拓展

節流函數 節省流量節省內存性能的一種函數，可以理解為是一種性能優化方案

//首先定義一個全局變量 當瀏覽器窗口大小發生變化也就是重新計算窗口大小的時候觸發 var canRun = true; window.onresize = function () { if (!canRun) { return } canRun = false//設置一個定時器進行輪詢操作 setTimeout(function () {//這是要做的事情 console.log('函數節流')//最后記得重新賦值true繼續讓他取反 canRun = true//每隔1000毫秒也就是1秒鐘就執行一次 }, 1000) }

防抖函數 當事件觸發完成之后再延遲觸發，并且只觸發一次；如果在觸發完成之前再次觸發，則會再次刷新延遲

//定義方法即要做的事情 function fun(){ console.log(’onresize’) }//定義事件觸發要執行的方法，兩個參數分別是傳入的要做的事情和定時器的毫秒數function debounce (fn, delay) {//定義一個變量作為等會清除對象 var handle;//這里用到了閉包，一個函數里面return另一個函數，變量相互牽引導致垃圾回收機制不會銷毀handle變量 return function () {//在這里一定要清除前面的定時器，然后創建一個新的定時器 clearTimeout(handle) //最后這個定時器只會執行一次也就是事件觸發完成之后延遲500毫秒再觸發（這里的變量賦值是跟定時器建立連接，進行地址賦值，一定要重新賦值給handle handle = setTimeout(function () { fn() }, delay) }}//給瀏覽器添加監聽事件resizewindow.addEventListener(’resize’, debounce(fun, 500));

兩者區別

總結

到此這篇關于vue輸入框使用模糊搜索功能的實現代碼的文章就介紹到這了,更多相關vue輸入框模糊搜索內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！