Element UI的input输入框进行搜索的时候（根据输入内容提供对应的输入建议）有个坑，它只能用第一个字进行搜索，不能够实现模糊匹配，下面的方法就是填这个坑。
原来搜“奖”，后台给返回数据，但是不会出现下拉框。
例如：
只要搜“抽”才出现下拉框
解决后实现效果：
代码如下：
<el-row class="demo-autocomplete">
<el-col :span="12">
<el-autocomplete
class="inline-input"
v-model="name"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
:trigger-on-focus="false"
@select="handleSelect"
@input="changeData"
></el-autocomplete>
</el-col>
</el-row><script>
export default {
data() {
return {
name:"",//藏品名称
restaurants: [],
}
},
methods: {
querySearch(queryString, cb) {
var restaurants = this.restaurants;
var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
cb(results);
},
createStateFilter(queryString) {
return (state) => {
return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
};
},
//@select 点击选中建议项时触发
handleSelect(item) {
this.name=item.value
this.select=item.value
this.getnumber()
},
//@input 在 Input 值改变时触发
changeData(value){
if(value!=''){
this.handleChange()
}else {
this.image = ''
this.select=""
}
},
// 接口
async handleChange() {
let param={
type:"collection",
name:this.name
};
await this.$api.operateMgmt
.synthesisWorks(param)
.then((res) => {
if (res.code == 200) {
this.restaurants=res.data.map(item=>{
return{
value:item.title
}
})
this.image=res.data[0].image
this.worksId=res.data[0].id
} else {
this.$message({
message: res.message,
type: "error",
duration: this.common.duration,
});
}
});
},
}
</script>重点：
createStateFilter(queryString) {
return (state) => {
return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
};
},
//这里大于-1可以实现模糊查询，如果你要搜“奖”，就会搜到含“奖”的所有字如果使用Element UI里面的
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
//这里等于0只能搜“奖”开头的字