1. 程式人生 > 實用技巧 >Vue/ElementUI實現input框模糊查詢

Vue/ElementUI實現input框模糊查詢

1 <el-autocomplete style="width:300px" v-model="inputName" :fetch-suggestions="querySearch" clearable placeholder="請輸入搜尋的內容"></el-autocomplete> 
methods:{
     querySearch(queruString, cb){
        var nameTipsArray = this.nameTipsArray;
         cb(nameTipsArray);
    }   
},
watch:{
    inputName:{
      handler: function() {
            this.nameTipsArray = [];//這是定義好的用於存放下拉提醒框中資料的陣列
               var len = this.nameArray.length;//nameArray是頁面初始化時全部資料
               var arr = [];
               for (var i = 0; i 
< len; i++) {//根據輸入框中inputName的值進行模糊匹配   if (this.nameArray[i].indexOf(this.inputName) >= 0) { arr.push(this.nameArray[i]);//符合條件的值都放入arr中   } } console.log(arr); //el-autocomplete元素要求陣列內是物件,且有value屬性,此處做一個格式調整 for (var i = 0; i
< arr.length; i++) { var obj = { value: "" }; obj.value = arr[i]; this.nameTipsArray.push(obj); } } } }