Question

我在jquery自动完成代码中遇到了一个非常令人沮丧的错误。我正在为一个小型图书馆项目编写图书目录。自动填充用于帮助用户按主题标签或标题进行搜索。

这是代码（目前正在$(document).ready();上执行）

var autoData = [];
$.get('/search_bar', function(data){ 
    autoData = $.makeArray(data);
    console.log(autoData);
    });

    $("#search").autocomplete({
      source: function(req, responseFn){
        var re = $.ui.autocomplete.escapeRegex(req.term);
        var matcher = new RegExp("(?:^| )" + re, "gi");
        var a = $.grep(autoData, function(item, index){
          return matcher.test(item);
        });
        responseFn(a); 
      },
      minLength: 2
});

为了集中讨论这个问题，我已经将服务器的响应限制为一组3个标题，这些标题都应该通过开始输入“pag ....”来返回。

console.log(autoData) => ["Pages africaines 1", "Pages africaines 2", "Pages africaines 3"]

然而，jQuery自动完成仅建议“非洲页面1”和“非洲页面3”，而不是（正如我所料）“Page africaines 2”，除非您输入整个标题“Pages africaines 2”（在这一点上，它似乎是唯一的建议，正如人们所期望的那样。）

我在上面的数组上测试了RegExp / $。grep，它似乎工作正常：

autoData = ["Pages africaines 1", "Pages africaines 2", "Pages africaines 3"]

$.grep(autoData, function(item, index){ return RegExp("(?:^| )pages", "gi") })
=> ["Pages africaines 1", "Pages africaines 2", "Pages africaines 3"]

有什么见解？ $.get()从我的rails后端接收json编码的响应，例如：

def search_bar
    output = Book.search('pages').map{|bt| bt.title }
    render :json => output.to_json
end

（我已将自动完成限制在上面的示例中进行调试）。但是，在Chrome javascript控制台中，autoData绝对是一个预期的数组对象。

提前致谢！

（注意：我使用上面的RegExp与“（？：^ |）”而不是像“\ b”这样的字边界匹配的原因是因为标题中经常有unicode /重音字符，似乎打破了“\ b”匹配。）

Answer 1

替换：

var matcher = new RegExp("(?:^| )" + re, "gi");
var a = $.grep(autoData, function(item, index){
  return matcher.test(item);
});

使用：

var a = $.grep(autoData, function(item, index){
  var matcher = new RegExp("(?:^| )" + re, "gi");
  return matcher.test(item);
});

Answer 2

全局标志使引擎记住搜索的位置 - 每个连续的.test调用在使用相同的参数调用时不一定返回相同的值，因为它将在最后一个索引之后开始匹配。

一个更简单的例子：

var regexp = /./g;
regexp.test("a"); // true  - nothing special, starting at index 0 to match
regexp.test("a"); // false - starting at index 1, where no character is apparent
regexp.test("a"); // true  - reset; same scenario as test #1 again

最简单的方法是删除g标记：http://jsfiddle.net/gQjh6/。

jQuery自动完成不显示所有匹配项

2 个答案: