vue輸入框使用模糊搜尋

2021-10-06 11:05:49 字數 1560 閱讀 2380

實現原理:

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

模板中的**

class

="search"

>

@input

="autosearch"

v-model

="value"

placeholder

=style

="width

:90%;

display

:inline-block;

" />

>

搜尋span

>

div>

v-for

="(item) in allarea"

:key

="item.communityid"

>

v-if

="allnewarea.length != 0"

>

}li>

v-else

>

}li>

ul>

js**
getareadetail()

).then

(res =>)}

,autosearch()

settimeout((

)=>})

},500);}

,

拓展

節流函式節省流量節省記憶體效能的一種函式,可以理解為是一種效能優化方案

//首先定義乙個全域性變數 當瀏覽器視窗大小發生變化也就是重新計算視窗大小的時候觸發

var canrun =

true

; window.

onresize

=function()

canrun =

false

//設定乙個定時器進行輪詢操作

settimeout

(function()

,1000

)}

防抖函式當事件觸發完成之後再延遲觸發,並且只觸發一次;如果在觸發完成之前再次觸發,則會再次重新整理延遲

//定義方法即要做的事情

function

fun(

)//定義事件觸發要執行的方法,兩個引數分別是傳入的要做的事情和定時器的毫秒數

function

debounce

(fn, delay)

, delay)}}

//給瀏覽器新增監聽事件resize

window.

addeventlistener

('resize'

,debounce

(fun,

500)

);

兩者區別

防抖函式和節流函式都是用來提公升效能優化及使用者體驗的一種方案;

防抖函式在乙個時間被觸發多次,只有最後一次生效

節流函式n秒後觸發一次,n秒內觸發後,定時器重新計時

ElementUI 輸入框模糊搜尋資料處理的坑

前言 最近在遇到乙個需求,輸入框 input 模糊搜尋的功能,我用到的是elementui的el autocomplete 元件,但是在使用的過程中遇到了一些坑,分享一下 坑1 根據官方提供的方法 querysearch querystring,cb customerorderapi.getumli...

Vue限制輸入框只能輸入整數

首先,得明確監聽input輸入框變化的方法是input,不是change。方案一 type number 作用 成功禁止輸入字母 能輸入小數點,第一位可以為0,小數點能輸入多個 eg 01111.5.5 方案二 v model.number 作用 輸入過程中能輸入字母,但在失去焦點時多餘的字母會被清...

asp 輸入框即時搜尋問題

問題描述 1.資料庫有一條記錄 客戶名稱 中國電信 short py 拼音縮寫 zgdx 2.我在輸入框輸入zg能搜尋到相應的資訊,但是我輸入中國則無法找到。請問如何解決,我用的是js asp,下面是 所有 請看附件 response.contenttype text xml search trim...