功能需求
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可以过滤输入词前后的空格