vue實現input輸入框的模糊查詢

 最近在用uni-app做一個項目，使用的框架還是vue，想了好久才做出來 。

HTML代碼部分

<input type="text" focus
       class="search_input"  
       placeholder="請輸入搜索站點" 
       v-model="fname"
       value="1"
       @focus="search_site"/>

//icon是叉號圖標，點擊叉號的時候可以清空輸入框的內容
 <uni-icon type="closeempty" class="search_icon clear" size="26" v-if="fname" @click="clearInput('fname')"></uni-icon>

JS代碼部分　

 

mounted(){
     this.init();  
},
methods:{
     init(){
          //調用后台接口獲取數據展示到頁面中
     },
     search(value){
          let _self = this;
          if(!value){
             _self.siteDatas=[];
             return;
           };
           //調用后台接口獲取數據展示到頁面中
     },
     // 點擊取消按鈕清空輸入框
     clearInput(val) {
           this[val] = "";
           this.siteDatas=[];
           this.init();
     },
     // 站點輸入框模糊查詢
     search_site(){
           if(document.querySelector('input')==document.activeElement){
                  //往輸入框中傳入值，根據值調后台接口進行查詢
                  this.search(this.fname.trim());
            }
            if(this.fname == ''){
                   //當輸入框為空的時候再次調用接口顯示全部數據
                   this.init();
             }
    }
}
//監聽輸入框中值的變化
watch: {
    fname:function(){
        //調用模糊查詢函數
        this.search_site();
    }
}