前提
项目在交由客户试用一段时间后,因为el-select下拉框数据太多,选择起来太过费时费力,所以提出修改,希望可以修改成类似百度搜索那种,可以在输入一个字后,有联想结果的那种,听到这个需求的时候,我立刻想起了el-autocomplete这个组件。
遇到的问题
问题1:只有输入候选项的第一个汉字,才有联想结果
解决方法:
将原代码中的toLowerCase()) === 0改成toLowerCase()) > -1 即可解决该问题。
原代码:
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
修改后的代码:
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
};
这样经过修改之后,随便输入候选项中的任何一个字,不管是开头、结尾还是中间,都可以联想到有这个字的候选项,非常nice。