Textext插件自动建议列表需以搜索字符串开头优先排序的问题

嘿，我来帮你调整自动补全的结果顺序！目前你用的默认过滤方法只会返回所有包含搜索关键词的结果，没有区分开头匹配和包含匹配的优先级。咱们只需要自定义一个过滤逻辑，把以搜索文本开头的结果排在前面，仅包含文本的结果放在后面就行。

修改后的代码实现 #

核心思路是把结果分成两组：先筛选出以关键词开头的项，再筛选出包含关键词但不是开头的项，最后把两组合并起来。这里还要注意大小写不敏感的匹配，提升用户体验：

$('#textarea').textext({ 
    plugins: 'tags autocomplete filter focus', 
    minLength: 3, 
})
.bind('getSuggestions', function(e, data) {
    if (data.query.length) {
        var list = [ 
            'United states of America', 
            'South America', 
            'India', 
            'Delhi', 
            'Pune', 
            'North America', 
            'American River', 
            'American canyon' 
        ],
        textext = $(e.target).textext()[0],
        query = (data ? data.query : '') || '',
        lowerQuery = query.toLowerCase(); // 统一转小写，避免大小写影响匹配

        // 自定义过滤排序逻辑
        const startsWithMatches = [];
        const containsMatches = [];

        list.forEach(item => {
            const lowerItem = item.toLowerCase();
            if (lowerItem.startsWith(lowerQuery)) {
                startsWithMatches.push(item);
            } else if (lowerItem.includes(lowerQuery)) {
                containsMatches.push(item);
            }
        });

        // 合并两组结果：开头匹配在前，包含匹配在后
        const filteredResults = startsWithMatches.concat(containsMatches);

        $(this).trigger(
            'setSuggestions', 
            { result: filteredResults }
        );
    }
});

<textarea id="textarea" class="example" rows="1"></textarea>

代码说明 #

• 放弃了默认的textext.itemManager().filter方法，改用自定义的遍历筛选逻辑
• 把搜索关键词和列表项都转成小写，实现大小写不敏感的匹配
• 先收集所有以关键词开头的项，再收集包含关键词但不是开头的项
• 最后把两组结果合并，触发setSuggestions事件返回给插件

这样当用户输入“Ameri”时，就会先显示American River、American canyon，再显示United states of America、South America、North America啦！

内容的提问来源于stack exchange，提问作者bharadwaja Gummadi