一、需求：

需要根據(jù)一個(gè)本地的數(shù)據(jù)，實(shí)現(xiàn)本地?cái)?shù)據(jù)的模糊查找。具體需求就是根據(jù)本地?cái)?shù)據(jù)，在手機(jī)輸入框輸入一個(gè)字或者多個(gè)字時(shí)實(shí)現(xiàn)模糊查找的效果。

二、實(shí)現(xiàn)原理：

正則匹配

三、難點(diǎn)：

1、知道用戶正在輸入的是中文還是英文。如果是中文，在打字的時(shí)候，不能觸發(fā)模糊搜索的方法，如果是輸入的英文，那么就應(yīng)該在輸入第一個(gè)字母時(shí)就要觸發(fā)，所以在vue中，input的change事件顯然是不能滿足的，因?yàn)閏hange事件在input改變時(shí)就會(huì)觸發(fā)，不會(huì)分辨是英文還是中文。所以，這里我們用到input的兩個(gè)屬性：

• compositionstart：事件觸發(fā)于一段文字的輸入之前，通俗來說就是中文輸入開始時(shí)，包括一連串的鍵盤操作。
• compositionend：當(dāng)文本段落的組成完成或取消時(shí)觸發(fā)，所以有了這兩個(gè)事件我們就可以正確的觸發(fā)模糊搜索事件。

代碼：

<input 
  v-model="inputMachine"
  type="text"
  placeholder="請(qǐng)輸入內(nèi)容進(jìn)行模糊查找"
  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ā)這個(gè)模糊查找方法，可以通過vue中的wacth事件觸發(fā)，或者change事件，判斷flag為true或者false來執(zhí)行方法。但是還有一個(gè)問題就是，如果輸入的中文或者英文太快的話，就會(huì)不斷調(diào)用方法，就會(huì)出現(xiàn)如果上一次的輸入結(jié)果還沒有查找出來，又觸發(fā)了下一個(gè)查找，就會(huì)有最后一次輸入內(nèi)容查找不正確的情況。所以針對(duì)這個(gè)情況，做了一個(gè)節(jié)流的處理。代碼如下：

watch:{
    inputMachine(){
      if(this.timer){
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() =>{
        this.changeMachine()
      },1500)
    },
    deep: true,
  },

觸發(fā)的時(shí)間長(zhǎng)短可以根據(jù)需求自己設(shè)定，這樣就不會(huì)造成上述問題了，前端模糊查找也實(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