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 插件的一部分，发布变量的数据通过使用

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

我需要在我的代码中加入this answer about Filter response in jQuery autocomplete 吗？

Answer 1

看着你的小提琴，我把它分叉并做了一个工作示例。

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" 会命中名称，但 "il" 不会命中结果，可以将其调整为 === 0。

希望这会有所帮助。

Answer 2

试试这个。我只在您的自动完成配置后添加了按键侦听器，并在按键上升时调用搜索。

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

    $('#post-search').on("keyup", function() {
        $(this).autocomplete( "search", $(this).val() );
    });

});

这是我添加的。

$('#post-search').on("keyup", function() {
    $(this).autocomplete( "search", $(this).val() );
});

更新了您发布的小提琴：JSFiddle