【vue】vue +element 搭建项目，实现实时输入效果时停止输入后发送请求

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