浅谈数据模糊搜索

第一步：

既然是搜索那就肯定有一个input输入框，我们使用数据双向绑定绑定input输入框的数据

上代码

<u-input
v-model="searchValue"
type="text" :border="true"
class="searchIpt"
@input="iptChangde(searchValue)"
placeholder="请输入搜索内容"
placeholder-style = "color: #c0c4cc;z-index:999;font-size:20rpx"
/>

先来解释一下这段代码

@input事件就是input中的value发生改变的时候就会触发，别的相信大家都懂

第二步

我们在@input事件中传入了input框绑定的数据searchValue，大家在做的时候可以在触发函数的时候打印一下这个数据，确保这一步对了哈。

第三步

现在拿到了输入框的数据，我们需要在需要进行模糊搜索的数据进行搜索，其实也就是一个indexof方法判断就行，这里有个注意点就是，我的数据源是options4，但是我为了不改变原数组，复制了一个和options4一样的options5数组，对options5进行操作。上代码

iptChangde(searchValue){
// console.log(searchValue)
if(searchValue){
let arr = []
this.options5.forEach((item)=>{
if(item.label.indexOf(searchValue) !== -1){
arr.push(item)
}
this.options4 = arr
})
}
if(searchValue== ''){
this.$nextTick(()=>{
this.options4 = this.options5
this.$forceUpdate()
})
}
},

indexof这个方法，检测数据里面有没有（）里面的数据，有的话会返回出现改数据第一次的序号，没有的话就返回-1。

当输入框的值为空的时候我们需要展示全部内容，所以这里需要重新赋值，但是这里也是有个小问题，就是重新赋值之后不刷新，我们可以调用$nextTick这个钩子，在里面调用this.$forceUpdate()强制刷新渲染。

最后

以上就是爱撒娇大米为你收集整理的浅谈数据模糊搜索的全部内容，希望文章能够帮你解决浅谈数据模糊搜索所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。