jQuery自动完成UI搜索所有方向

我正在使用jQuery自动完成来显示大约2000条记录列表的结果。因为这个列表在我看来很长，我需要一个很好的过滤器来搜索所有这些记录。jQuery自动完成UI搜索所有方向

我已经修改了源代码，以便我不仅可以在标签字段中搜索，还可以在值字段中搜索。我现在想要的是，我可以搜索“S4 galaxy”，找到“Samsung Galaxy S4”。标准的jquery自动完成只能从左到右进行搜索，因此将会找到“galaxy s4”，而不是“s4 galaxy”。我也想看看“gal s4”并找到“Samsung Galaxy S4”。

var completeResults = [{ 
    value: "S4 iv", 
    label: "Samsung Galaxy S4", 
    image: "samsung_galaxy_s_iv_1.jpg" 
}, { 
    value: "stackoverflow", 
    label: "Nokia lumia 920", 
    image: "nokia_lumia_920_1.jpg" 
}];

completeResults现在是一个：

作为一个额外的，它如果比赛被进行了大胆的>“三星银河S4”

完整的代码我现在用下面的看台将是很好短名单！通常约2000条记录。

function custom_source(request, response) { 
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
    response($.grep(completeResults, function (value) { 
     return matcher.test(value.value) || matcher.test(value.label); 
    })); 
} 

$("#s").autocomplete({ 
    source: custom_source, 
    minLength: 0 
}).data("ui-autocomplete")._renderItem = function (ul, item) { 
    var inner_html = "<a><img src='../img/type/120x200/" + item.image + "' width='21' height='35'/><span class='title'>" + item.label + "</span></a>"; 

    return $("<li></li>") 
     .data("item.autocomplete", item) 
     .append(inner_html) 
     .appendTo(ul); 
};

来源

2013-05-02 Timo002

有了这么多的记录，你可能会更好地做你的服务器上搜索 – 2013-05-02 12:47:43

嗯，我想在浏览器中这样做，所以我会有更少的数据库查询。我怎么能做这个服务器端？用PHP？我不想连续查询数据库，因为如果每天有几千人使用这个数据库，这会给我带来很多的数据库使用！ – Timo002 2013-05-02 12:57:20

这是真的，绝对是一种折衷。尽管您的Web服务器可以处理数千个请求。还有一个问题 - 如果我输入“诺基亚三星”，我应该得到两个结果吗？或者是否在建议项目中找到每个术语？ – 2013-05-02 13:06:43

好的，这里有一些应该工作（减去文本的粗体，我会得到）。基本上，策略是：

在用户类型的每个术语之外创建正则表达式。我们可以通过拆分' '上的输入来做到这一点。
对于可能的选择列表中的每一个选择，看看有没有什么选择，我们在步骤1中
提取每一个正则表达式匹配仅返回满足条件的在步骤2中

function custom_source(request, response) { 
    // Create an array of regular expressions from the user's input: 
    var terms = $.map(request.term.split(' '), function (term) { 
     // Ignore just whitespace: 
     if ($.trim(term)) { 
      return new RegExp($.ui.autocomplete.escapeRegex(term), 'i'); 
     } 
    }); 

    response($.grep(completeResults, function (value) { 
     var found = true 
      , i 
      , regex; 

     // For every result, iterate over every term we extracted earlier and make sure it matches: 
     for (i = 0; i < terms.length && found; i++) { 
      regex = terms[i]; 
      found = found && (regex.test(value.value) || regex.test(value.label)); 
     } 

     return found; 
    })); 
}

值

例子：http://jsfiddle.net/Aa5nK/73/

你的问题的另一部分是在以下问题回答：

jQueryUI: how can I custom-format the Autocomplete plug-in results?

来源

2013-05-02 13:22:27

唯一的是我会说格式解决方案会更好，如果它使用了CSS类而不是嵌入式样式。 +1链接 – 2013-05-02 13:31:28

太棒了，这工作正常！我要测试它，如果确定，这将是答案。但是，在IE10中它很慢..这是一个问题，因为它都是由浏览器完成的？在这种情况下，服务器端会更好吗？如果是这样，我可以在已经准备好的文件中做到这一点，所以我不需要任何SQL查询。 – Timo002 2013-05-02 13:43:16

@ Timo002：我可以尝试使用一个正则表达式，而不是针对每个术语的正则表达式进行测试。是的，因为浏览器正在执行过滤器，所以速度很慢。一秒钟，我会更新答案 – 2013-05-02 13:45:24

jQuery自动完成UI搜索所有方向

回答

相关问题