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

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

例如：如果用户搜索星级，服务器将发回星际迷航未被发现国家/地区，搜索框将显示自动填充选项名为星际迷航未被发现的国家。

这很好用。

如果用户输入星际迷航，服务器将再次发回星际迷航未被发现国家/地区，自动整理将更新。没关系。

以下是我遇到的问题：

如果用户键入星区，服务器将发回星际迷航未被发现国家/地区，但自动填充 >不会显示它。

自动填充只会在按顺序时显示结果（您不能跳过单词）。

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

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个项目的数组？为什么要使用数组呢？

自动填充有时无法显示服务器的结果

1 个答案: