一、需求：
需要根据一个本地的数据，实现本地数据的模糊查找。具体需求就是根据本地数据，在手机输入框输入一个字或者多个字时实现模糊查找的效果。
二、实现原理：
正则匹配
三、难点：
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
