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();
    }
}