javascript - jQuery自动完成如何过滤响应数据

Question

我有这样的代码设置 fiddle但自动完成功能不会在键入时过滤结果。

jQuery(document).ready(function($) {

    var autocompleteTerms = JSON.parse( posts );

    $('#post-search').autocomplete({
        minLength: 2,
        source: function (request, response) {
            response($.map(autocompleteTerms, function (value, key) {
                return {
                    label: value.post_title,
                    value: value.ID
                }
            }));
        },
        focus: function(event, ui) {
            $('#post-search').val(ui.item.post_title);
            return false;
        },
        change: function (event, ui) {
            if (!ui.item) {
                $("#post-search").val('');
                $('#post-search-result').val('');
            }
        },
        select: function(event, ui) {
            $('#post-search').val(ui.item.label);
            $('#post-search-result').val(ui.item.value);
            return false;
        }
    });

});

这是 WordPress 插件的一部分，使用 post 变量传递数据

wp_localize_script('post-title-autocomplete', 'posts', [json_encode($results)]);

我需要合并 this answer about Filter response in jQuery autocomplete在我的代码中？

Answer 1

看着你的 fiddle ，我 fork 了它并做了一个工作示例。

http://jsfiddle.net/Twisty/j3jLwwfm/5/

您使用$.map()的方式，您只是返回具有特定格式的所有数据。所有这些都不会被过滤或调整以匹配用户输入的内容。 response() 将获取整个数据集并将其返回给用户每次击键。您可以调整函数来匹配和过滤结果。

要解决此问题，您必须迭代每个可能的值，并使用一种算法来挑选出您想要显示为结果的项目。正如我评论的那样，我会像这样使用 $.each() :

source: function(request, response) {
  var r = [];
  var q = request.term.toLowerCase();
  $.each(data, function(k, v) {
    if (v.first_name.toLowerCase().indexOf(q) != -1) {
      r.push({
        label: v.first_name + " " + v.last_name,
        value: v.ID
      });
    }
  });
  response(r);
}

r 是结果数组。 q 是用户的查询。为了使其忽略大小写，我将查询和数据值都转换为小写。使用 .indexOf() 我可以检查查询字符串是否是数据值的一部分。如果未找到查询，则返回值将为 -1，并且根据找到的索引位置，返回值为 0 或更高。

如果查询是“wi”，则结果将为0，并且该值将传递给r。如果查询是“ill”，则将以相同的方式完成。如果您想确保 "wil" 能够命中某个名称，则可以将其调整为 === 0，但 "il" > 不会得到结果。

希望这有帮助。