用vue实现input输入框下拉模糊搜索提示功能

效果图

20181009105633.png
1、实现方式一, v-on:input(缺点是：每次按一次键盘，都会触发一次，无论输入框里面的值有没有变化)
html

<input type="text" id="cardsNum2" v-model="searchVal"  value="1" v-on:input ="inputFunc">

js

//fuzzy_search() 调取模糊搜索的方法
inputFunc:function(){
if(this.searchVal.trim()){
    this.fuzzy_search(this.searchVal.trim());
}
}

2、实时监控searchVal的值，使用watch方法
html

<input type="text" id="cardsNum2" v-model="searchVal"  value="1"v-on:focus="focus()">

js

//fuzzy_list  为通过接口获得的模糊搜索的列表
methods:{
focus:function(){
  if(document.querySelector('input')==document.activeElement){
    this.fuzzy_search(this.searchVal.trim());
  }
 },
fuzzy_search:function(value){
    var that =this;
    if(!value){
        that.fuzzy_list=[];
        return;
    }
    //调取接口
 },
},
watch:{
 searchVal:function(){
    this.focus();
 },
}