1.实现的效果
输入关键字后，根据输入的关键字实时显示搜索的结果,按回车键时也进行搜索
2.原理：
- 通过时间戳+定时器+一个全局变量实现。代码量很少比较易懂。
用户输入时触发keyup事件，并调用事件函数。事件函数被调用后会生成对应的event.timeStamp，这个值在事件函数体内一直不会变。
将event.timeStamp赋给全局中定义的this.lastTimeStamp。这个this.astTimeStamp是一个全局的变量，这样这个值在每次事件触发时都会被改变。
如果在1s内，this.lastTimeStamp这个值被事件函数重新赋值修改，则this.lastTimeStamp != event.timeStamp;说明还在输入。不走ajax请求。
若1s后不再触发事件，不再调用事件函数。this.lastTimeStamp被本次事件函数赋值一次后，没有再被改写。则说明，此时不再输入或有间歇。this.lastTimeStamp==event.timeStamp。发送ajax请求。
3.html
<el-input placeholder="请输入内容" class="input-with-select marign-sm-b" clearable v-model="searchKey" @keyup.native="onkeyup($event)" @keyup.enter.native="onenter">
<el-button slot="append" icon="el-icon-search" @click.native="onenter"></el-button>
</el-input>
4.js
export default {
data() {
return {
searchKey: '',//搜索关键字
lastTimeStamp: 0,//标记当前事件函数的时间戳
}
},
created(){
},
methods: {
/**
* des:搜索的回车事件
*/
onenter(){
console.log('发送请求!!!');
},
/**
* des:用户在输入状态下不发送请求，等停止输入后发送请求
*/
onkeyup(event){
if(event.keyCode != 13){//除回车键外
//标记当前事件函数的时间戳
this.lastTimeStamp = event.timeStamp;
setTimeout(() => {
//1s后比较二者是否还相同（因为只要还有事件触发，lastTimeStamp就会被改写，不再是当前事件函数的时间戳）
if(this.lastTimeStamp == event.timeStamp){
console.log('发送请求');
}
}, 1000);
}
},
},
}
参考链接：
个人资料：
作者：smile.轉角
QQ：493177502