Question

我想创建一个带有自定义过滤器的vuetify自动完成功能，该过滤器首先显示以searchtext开头的匹配，然后显示非以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
        );
    }
},

Answer 1

Codepen（例如，键入“ ma”）

我认为您需要手动对其进行排序，无论项目是否匹配，过滤器只会返回true / false。

// 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;
    });
};

然后将排序后的数组传递给items prop

<v-autocomplete :items="computedItems"

...

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

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

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

1 个答案: