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

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 自动完成仅建议“Pages africaines 1”和“Page africaines 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);
});