vue-H5实现前端模糊查找

一、需求：

需要根据一个本地的数据，实现本地数据的模糊查找。具体需求就是根据本地数据，在手机输入框输入一个字或者多个字时实现模糊查找的效果。

二、实现原理：

正则匹配

三、难点：

1、知道用户正在输入的是中文还是英文。如果是中文，在打字的时候，不能触发模糊搜索的方法，如果是输入的英文，那么就应该在输入第一个字母时就要触发，所以在vue中，input的change事件显然是不能满足的，因为change事件在input改变时就会触发，不会分辨是英文还是中文。所以，这里我们用到input的两个属性：

• compositionstart：事件触发于一段文字的输入之前，通俗来说就是中文输入开始时，包括一连串的键盘操作。
• compositionend：当文本段落的组成完成或取消时触发，所以有了这两个事件我们就可以正确的触发模糊搜索事件。

代码：

<input 
  v-model="inputMachine"
  type="text"
  placeholder="请输入内容进行模糊查找"
  maxlength="10"
  @compositionstart="flag = true"
  @compositionend="flag = false"
>

// 模糊查询方法,keyWor为input输入的内容，dataBase为数据源
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;
},                        

触发这个模糊查找方法，可以通过vue中的wacth事件触发，或者change事件，判断flag为true或者false来执行方法。但是还有一个问题就是，如果输入的中文或者英文太快的话，就会不断调用方法，就会出现如果上一次的输入结果还没有查找出来，又触发了下一个查找，就会有最后一次输入内容查找不正确的情况。所以针对这个情况，做了一个节流的处理。代码如下：

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

触发的时间长短可以根据需求自己设定，这样就不会造成上述问题了，前端模糊查找也实现了。

下面是compositionend和compositionstart的参考文档；

https://developer.mozilla.org/zh-CN/docs/Web/Events/compositionend

https://developer.mozilla.org/zh-CN/docs/Web/Events/compositionstart