自动完成有时不显示来自服务器的结果

Question

代码解释如下。

这是我正在使用的自动完成功能（但我检查了其他 3 个自动完成包，它们的行为方式都相同）：

https://goodies.pixabay.com/javascript/auto-complete/demo.html

这是我在客户端使用它的方式（请注意，我将自动完成功能与 socket.io 结合使用，以便在用户在搜索框中键入内容时更新我的​​自动完成功能） ：

socket.on('searchBarResults', function(data) {

var my_autoComplete = new autoComplete({
    selector: 'input[name="searchbar4"]',
    minChars: 1,
    cache: false,
    source: function(term, suggest){
        term = term.toLowerCase();
        var choices = [
            data[0]._source.movie
        ];
        var matches = [];
        for (i=0; i<choices.length; i++)
            if (~choices[i].toLowerCase().indexOf(term)) matches.push(choices[i]);
        suggest(matches);
    }
});

    $searchBar4.on('input', function(event){
        my_autoComplete.destroy();
    });
});

这就是这一切所做的：当用户开始输入电影的名称时，在他们输入的每个单词之后，服务器都会在数据库中搜索匹配项，并将结果发送给客户端。

例如：如果用户搜索Star，服务器会发回Star Trek Undiscovered Country，并且搜索框会显示自动完成选项 称为星际迷航未知国。

这一切都很好。

如果用户键入 Star Trek，服务器将再次发送回 Star Trek Undiscovered Country，并且自动完成功能将更新。没关系。

这是我遇到的问题：

如果用户输入Star Country，服务器将发回Star Trek Undiscovered Country，但自动完成 不会显示它。

仅当单词按顺序（您不能跳过单词）时，自动完成才会显示结果。

无论用户在搜索框中输入单词的顺序如何，我如何才能让自动完成功能始终显示来自服务器的结果？

Answer 1

问题出在你的：

if (~choices[i].toLowerCase().indexOf(term)) matches.push(choices[i]);

它将删除所有与该术语不匹配的项目。

"Star Trek Undiscovered Country".toLowerCase().indexOf("Star Country")

它将返回 -1，因为它不包含整个字符串。您需要将其拆分为单词并逐个进行比较。

你应该可以做这样的事情：

var match = function(term, suggest){
        term = term.toLowerCase();

        // for debugging.
        var choices = new Array();
        choices.push('Star Trek Undiscovered Country');

        var matches = [];
        for (i=0; i<choices.length; i++)
        {
            var allMatches = true;
            var words = term.split(' '); // Split into words and check them individually.

            //TODO: Possibly handle case when there is only one word.

            for(var y = 0; y<words.length; y++)
            {
                // Check if this word is in choices[i].
                if (choices[i].toLowerCase().indexOf(words[y]) == -1)
                {
                    // Not a match.
                    allMatches = false;
                    // Possibly continue when allMatches == false, since the following words doesn't matter.
                }
            }
            if(allMatches)
            {
                matches.push(choices[i]);
            }
        }
        suggest(matches);
    }

var suggest = function(item){
  console.log(item);
};
match('Star Country', suggest); // Returns one item.
match('Star Blaster', suggest); // Returns no items.

另外，choices 似乎总是一个包含 1 个项目的数组？为什么要用数组呢？