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

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

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

已更新 Fiddle 您已发布：JSFiddle

Answer 2

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

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

您使用 $.map() 的方式，只是 return 使用特定格式处理所有数据。 None 其中的内容被过滤或调整以匹配用户输入的内容。 response() 将获取整个数据集，并 return 每次击键时将其提供给用户。您可以调整您的功能以匹配和过滤结果。

要解决这个问题，您必须遍历每个可能的值，并有一个算法可以挑选出您想要显示的项目作为结果。正如我评论的那样，我会像这样使用 $.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() 我可以检查查询字符串是否是数据值的一部分。如果未找到查询，returned 值将是 -1，并且将是 0 或更高，具体取决于找到它的索引位置。

如果查询是 "wi"，则结果将为 0，值将传递给 r。如果查询是 "ill"，这将以相同的方式完成。如果您想确保 "wil" 会命中名称，但 "il" 不会命中结果，您可以将其调整为 === 0。

希望这对您有所帮助。

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

jQuery autocomplete how to filter response data

javascript

jquery

jquery-ui

autocomplete

jquery-ui-autocomplete