博客

实例中给出了只能以第一个字搜索出来进行匹配,修改后模糊查询,对数据中包含的字段都显示出来.

代码如下:

<el-autocomplete
    class="inline-input"
    v-model="state2"
    :fetch-suggestions="querySearch"
    placeholder="请输入内容"
    :trigger-on-focus="false"
    @select="handleSelect"
    @input="changeData"
></el-autocomplete>

js代码:

export default {
    data() {
        return {
            restaurants:[],  //查询数组
            fileList: [],
            state2: '',  //查询字段
        };
    },
     methods: {
        querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        //删选数组
        createFilter(queryString) {
            return (state) => {
            return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1 );
            };
        },
        //搜索结果
        handleSelect(item) {
            console.log(item);
            this.state2 = item.value;
            this.select = item.value;
            this.showaddorders();
        },
        // 回车清空输入框
        changeData(value){
            if(value != ''){
                // 调接口
                this.showaddorders()
            }  else{
                this.select='';
            }
        },
         // 接口处理
        async showaddorders(){
            this.showaddorder = true;
            await userList(0)
			.then(res=>{
				console.log(res);
				if(res.data.code == 200){
                    //根据接口的结果处理
                    this.restaurants = res.data.data.nameArr.map(item=>{
                        return{
                            item值取要显示在输入框的值
                            value:item.text
                        }
                    });
				}else{
					Toast.fail(res.data.msg);
				}
			})
        },
    },
};

使用element ui 中的组件只能匹配首字查询

 createFilter(queryString) {
   return (restaurant) => {
     return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
   };
 },