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);}},},}
参考链接：
-
http://www.cnblogs.com/mingxinice/p/keyupSearch.html
个人资料：
作者：smile.轉角
QQ：493177502