input 输入事件防抖

系统管理员 2021-07-26 19:57 365阅读 0赞

### 前言 ###

input输入进行查询，不想输入一个拼音就触发事件，这样会频繁的触发，需要通过输入中文完成后再进行搜索

### 解决方法 — jquery ###

### 解决方法 — vue ###

<div class="input-warp">
      <input type="text" v-model="searchValue" />
      <div @click="search"></div>
    </div>
    export default { 
    	data () { 
    		return { 
    			searchValue: '',
    			searchArr: []
    		}
    	}
      	watch: { 
    		searchValue: { 
    	      	handler() { 
    		        if (this.timer) { 
    		          clearTimeout(this.timer)
    		        }
    		        this.timer = setTimeout(() => { 
    		          this.search();
    		        }, 200)
    		      },
    		    deep: true
    	    }
    	}
      	methods: { 
    		search () { 
    	      this.isSearch = true;
    	      this.searchValue = this.searchValue.trim('');
    	      if (this.searchValue !== '') { 
    	        this.searchList();
    	      } else { 
    	        this.searchArr = [];
    	      }
    	    },
    	    searchList () { 
    	      axios({ 
    	        url: ``
    	      }).then(({  data }) => { 
    	        this.searchArr = [];
    	        if (this.searchValue === '' || !data.content || !data.content.features.features) { 
    	          this.searchArr = [];
    	          return
    	        }
    	        // 查询结果
    	        this.searchArr = data.content.features.features;
    	    }
    	}
    }