el-autocomplete组件模糊查询及显示空白解决方法

  

el-autocomplete组件模糊查询显示空白，如图所示

原因：

下面这里是官网的部分JS代码，是因为这里只能使用restaurant.value，尽管后端传值给restaurant下是其他key的名称也不行（后端传来的只能是value，或者通过JS再处理一下）。

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

:value-key="item.valueKey" 

valueKey就是显示的名称

 解决方案：

将结果进行处理一下，用value返回。

成功了。

扩展阅读： 

示例一：基本使用

<template><el-autocompletev-model="state":fetch-suggestions="querySearch"placeholder="请输入"trigger-on-focus></el-autocomplete>
</template><script>
export default {data() {return {state: '',dataList: [{ custom_name: '北京xxxxxx公司' },{ custom_name: '上海xxxx公司' },{ custom_name: '广州xxxx公司' },{ custom_name: '深圳xxxx公司' }]};},methods: {querySearch(queryString, cb) {var dataList = this.dataList.forEach(item=>{//必须使用valueitem.value = item.custom_name});var results = queryString ? dataList.filter(this.createFilter(queryString)) : dataList;// 调用 callback 返回建议列表的数据cb(results);},createFilter(queryString) {return (data) => {return (data.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);};}}
};
</script>

 示例二：实现模糊匹配

为了让 el-autocomplete 支持模糊匹配，我们需要修改 createFilter 函数。

createFilter(queryString) {return (data) => {return data.value.toLowerCase().includes(queryString.toLowerCase());};
}

通过将 indexOf 替换为 includes 方法，我们现在可以实现部分匹配。

示例三：优化搜索体验

为了提供更好的用户体验，我们可以增加一些额外的功能，比如搜索高亮、最近搜索记录等。

methods: {createFilter(queryString) {return (data) => {const lowerCaseQuery = queryString.toLowerCase();const lowerCaseCity = data.value.toLowerCase();return lowerCaseCity.includes(lowerCaseQuery);};},highlightMatch(term, query) {const regExp = new RegExp(query, 'gi');return term.replace(regExp, '<strong>$&</strong>');}
},

在 el-autocomplete 的模板中，我们可以使用这个方法来高亮匹配的部分。

<template><el-autocompletev-model="state":fetch-suggestions="querySearch"placeholder="请输入"trigger-on-focus><template slot-scope="{ item }"><span v-html="highlightMatch(item.value, state)"></span></template></el-autocomplete>
</template>

示例四：使用第三方库

对于更复杂的模糊搜索需求，可以考虑使用像 Fuse.js 这样的第三方库，它提供了一种简单的方式来执行模糊搜索。

import Fuse from 'fuse.js';const options = {shouldSort: true,threshold: 0.6,location: 0,distance: 100,maxPatternLength: 32,minMatchCharLength: 1,keys: ['value']
};this.fuse = new Fuse(this.dataList, options);methods: {querySearch(queryString, cb) {const results = this.fuse.search(queryString);cb(results.map(result => result.item));}
}

通过这种方式，我们可以获得更精确的模糊搜索结果。

示例五：结合Vuex存储搜索历史

为了保持搜索记录，我们可以使用 Vuex 来存储最近的搜索历史。

import { mapState, mapMutations } from 'vuex';export default {computed: {...mapState(['searchHistory'])},methods: {...mapMutations(['addSearchHistory']),onInput(value) {this.addSearchHistory(value);}},created() {this.$store.dispatch('loadSearchHistory');}
};

然后，在 Vuex store 中定义相应的 actions 和 mutations 来处理搜索历史的保存和加载。