vue 有时候不好用 模糊查询

好用 模糊查询"/>

vue 有时候不好用 模糊查询

一、需求：

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

二、实现原理：

正则匹配

三、难点：

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

compositionstart：事件触发于一段文字的输入之前，通俗来说就是中文输入开始时，包括一连串的键盘操作。

compositionend：当文本段落的组成完成或取消时触发，所以有了这两个事件我们就可以正确的触发模糊搜索事件。

代码：

v-model="inputMachine"

type="text"

placeholder="请输入内容进行模糊查找"

maxlength="10"

@compositionstart="flag = true"

@compositiοnend="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的参考文档；