如何创建 v-autocomplete 首先显示项目startsWith然后显示项目indexOf

【问题标题】：How to create v-autocomplete which first shows items startsWith and then shows items indexOf如何创建 v-autocomplete 首先显示项目startsWith然后显示项目indexOf
【发布时间】：2019-06-11 12:46:11
【问题描述】：

我想创建一个带有自定义过滤器的 vuetify 自动完成功能，该过滤器首先显示以 searchtext 开头的命中，然后显示不是以 searchtext 开头的命中，但 searchtext 位于中间的某个位置。

我现在有一个像这样的自定义过滤器，但是这个过滤器不优先考虑以搜索文本开头的单词：

customFilter(item, queryText) {
    const textOne = item.description.toLowerCase();
    const textTwo = item.code.toLowerCase();
    const searchText = queryText.toLowerCase();

    return (
        textOne.indexOf(searchText) > -1 || textTwo.indexOf(searchText) > -1
        );
    }
},

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

Codepen（例如输入“ma”）

我相信您需要手动对其进行排序，无论项目是否匹配，过滤器都只返回真/假。

// https://stackoverflow.com/a/36114029/1981247
var _sortByTerm = function (data, term) {
    return data.sort(function (a, b) {
       // cast to lowercase
       return a.toLowerCase().indexOf(term) < b.toLowerCase().indexOf(term) ? -1 : 1;
    });
};

然后将排序后的数组传递给itemsprop

<v-autocomplete :items="computedItems"

...

computed: {
  computedItems() {
    return _sortByTerm(this.states, this.search.toLowerCase())
  },
},

注意这只是为了让您入门，您可能需要根据您使用的数据（和过滤器）稍微更改代码，例如_sortByTerm 仅适用于字符串数组，但在链接中也有对对象数组进行排序的解决方案。

【讨论】：