前端实现搜索功能

784 阅读1分钟

功能需求 1、搜索功能,1s内连续输入不触发,超过1s不输入就触发返回数据。
2、跳转详情后返回搜索页面,不需要点击键盘搜索图标。
3、键盘搜索图标也加了触发机制,连续1s内输入后点击搜索图标返回数据。
4、若输入前面后面有输入很多个空格,点击空白位置会将前后的空格过滤掉,如图。
解决方案
1、防抖功能,监听输入变化,具体代码

watch: {
	ipt(curVal, oldVal) {
            clearTimeout(this.timeId)
            this.timeId = setTimeout(() => {
		if(this.ipt!=''){
                    this.getFaqList(curVal)
		}else{
                    this.info=[]
		}
	}, 1000)
}
},

2、使用sessionStorage.setItem('key', this.info);
JSON.stringify(this.array)将数组转换为字符串存起来,返回再获取
this.info = JSON.parse(sessionStorage.getItem('info'));
注意:记得返回首页将其缓存删除掉,sessionStorage.removeItem("info")
3、具体的代码

<input type="search" name="search" v-model.trim="ipt" id="txt" @keypress="jumpSearch"/>

监听键盘回车触发调用接口

jumpSearch(e){
	var keycode = e.keyCode;
	console.log(e)
	if(keycode=='13') {
		e.preventDefault();
		//需要做的操作
	}
},

4、v-model.trim可以过滤输入词前后的空格