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

莫伊莱

我在这个小提琴上有类似的代码设置,但自动完成在打字时不会过滤结果。

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

我是否需要在我的代码中加入有关 jQuery 自动完成中的过滤器响应的答案

曲折的

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

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"不会命中结果您可以将其调整为

希望这可以帮助。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章