【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