javascript - 自动完成显示所有结果

Question

从页面format.json收集数据。

在 JS 中我有:

$('input[name="q"]').autoComplete({
    source: function(term, response){
        $.getJSON('/search.json', { q: term }, function(data){ response(data); });
    }
});

对于自动完成，我使用这个 plugin .

什么负责输出？

我在自动完成功能中删除了所有名称。想要退出只需要申请即可。有必要只删除那些重合的内容。

是.indexOf(term)负责的吗？使用什么？

屏幕显示所有结果(匹配的和不匹配的)。只需要查看那些匹配的内容。

Answer 1

当您从 JSON 文件获取数据时，您必须在客户端进行过滤。它与向服务器发送实际 AJAX 请求的方式相同，您需要在服务器上进行过滤，以仅返回您需要的数据(这就是您将查询项作为参数发送的原因)。

因此您需要将代码更改为如下所示:

$('input[name="q"]').autoComplete({
    source: function (term, response) {
        $.getJSON('/search.json', function (data) {
            term = term.toLowerCase();
            var matches = [];
            for (i = 0; i < data.length; i++)
                if (~data[i].toLowerCase().indexOf(term)) matches.push(data[i]);
            response(matches);
        });
    }
});

根据您的数据结构，您可能需要做一些不同的事情，但我假设它是一个字符串数组

编辑

如果你想限制你的匹配，你可以在 for 循环中而不是在最后一行中进行，这对于性能来说会更好，因为一旦你有 5 个匹配，它就不必循环

$('input[name="q"]').autoComplete({
    source: function (term, response) {
        $.getJSON('/search.json', function (data) {
            term = term.toLowerCase();
            var matches = [];
            for (i = 0; i < data.length; i++)
                if (~data[i].toLowerCase().indexOf(term) && matches.length == 4) {
                    matches.push(data[i]);
                    break;
                }
            response(matches);
        });
    }
});