实例中给出了只能以第一个字搜索出来进行匹配,修改后模糊查询,对数据中包含的字段都显示出来.
代码如下:
<el-autocompleteclass="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);};},
