Question

我在此fiddle上进行了代码设置，但自动填充功能不会在输入时过滤结果。

GridView

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

传递

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

});

我是否需要在代码中加入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() );
});

您发布的更新小提琴：JSFiddle

Answer 2

看着你的小提琴，我把它分叉并做了一个有效的例子。

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"，则会以相同的方式完成。如果您想确保=== 0会点击某个名称，则可以将其调整为"wil"，但"il"不会达到结果。

希望这有帮助。

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

2 个答案: