一、需求：
需要根據(jù)一個本地的數(shù)據(jù)，實現(xiàn)本地數(shù)據(jù)的模糊查找。具體需求就是根據(jù)本地數(shù)據(jù)，在手機輸入框輸入一個字或者多個字時實現(xiàn)模糊查找的效果。
二、實現(xiàn)原理：
正則匹配
三、難點：
1、知道用戶正在輸入的是中文還是英文。如果是中文，在打字的時候，不能觸發(fā)模糊搜索的方法，如果是輸入的英文，那么就應(yīng)該在輸入第一個字母時就要觸發(fā)，所以在vue中，input的change事件顯然是不能滿足的，因為change事件在input改變時就會觸發(fā)，不會分辨是英文還是中文。所以，這里我們用到input的兩個屬性：
- compositionstart：事件觸發(fā)于一段文字的輸入之前，通俗來說就是中文輸入開始時，包括一連串的鍵盤操作。
- compositionend：當(dāng)文本段落的組成完成或取消時觸發(fā)，所以有了這兩個事件我們就可以正確的觸發(fā)模糊搜索事件。
代碼：
<input
v-model="inputMachine"
type="text"
placeholder="請輸入內(nèi)容進行模糊查找"
maxlength="10"
@compositionstart="flag = true"
@compositionend="flag = false"
>
// 模糊查詢方法,keyWor為input輸入的內(nèi)容，dataBase為數(shù)據(jù)源
fuzzyQuery(keyWord, dataBase){
let reg = new RegExp(keyWord);
let arr = [];
for (let i = 0; i < dataBase.length; i++) {
if (reg.test(dataBase[i].sname)) {
arr.push(dataBase[i]);
}
}
return arr;
},
觸發(fā)這個模糊查找方法，可以通過vue中的wacth事件觸發(fā)，或者change事件，判斷flag為true或者false來執(zhí)行方法。但是還有一個問題就是，如果輸入的中文或者英文太快的話，就會不斷調(diào)用方法，就會出現(xiàn)如果上一次的輸入結(jié)果還沒有查找出來，又觸發(fā)了下一個查找，就會有最后一次輸入內(nèi)容查找不正確的情況。所以針對這個情況，做了一個節(jié)流的處理。代碼如下：
watch:{
inputMachine(){
if(this.timer){
clearTimeout(this.timer)
}
this.timer = setTimeout(() =>{
this.changeMachine()
},1500)
},
deep: true,
},
觸發(fā)的時間長短可以根據(jù)需求自己設(shè)定，這樣就不會造成上述問題了，前端模糊查找也實現(xiàn)了。
下面是compositionend和compositionstart的參考文檔；
https://developer.mozilla.org/zh-CN/docs/Web/Events/compositionend
https://developer.mozilla.org/zh-CN/docs/Web/Events/compositionstart
