浅谈数据模糊搜索

第一步：

既然是搜索那就肯定有一个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()强制刷新渲染。