使用 jquery 自动完成功能搜索多个值

Question

嗨，我正在尝试让 jQuery UI 自动完成小部件工作，以便它从我的数组的多个属性中搜索匹配项，但在我的代码中不起作用。目前

如果我输入"轿跑车"，响应将是"保时捷、奥迪、梅赛德斯"。以同样的方式，我将能够输入"911"并接收响应"保时捷"。感谢您的帮助。

$(function() {
var cars =
[
    {   "constructor" : "BMW", 
        "model": "Z3", 
        "type": "cabrio" },
    {   "constructor" : "Porsche", 
        "model": "911", 
        "type": "coupe" },
    {   "constructor" : "Audi", 
        "model": "A3", 
        "type": "coupe" },
    {   "constructor" : "Mercedes", 
        "model": "SL500", 
        "type": "coupe" }
];
    $("#quickFind").autocomplete({
        source: function(request, response){
            var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
            response( $.grep( cars, function( value ) {
            return matcher.test(value.constructor) || matcher.test(value.model) || matcher.test(value.type);
        }));
        }
    });
  });

Answer 1

在汽车数组的每个对象都缺少"标签"和"值"选项上，请查看：http://jsfiddle.net/DLLVw/77/

$(function() {
var cars =
[
    {   
        "label" : "BMW - Z3 - cabrio",
        "value" : "BMWZ3",
        "constructor" : "BMW", 
        "model": "Z3", 
        "type": "cabrio" },
    {   
         "label" : "Porsche - 911 - coupe",
        "value" : "Porsche911",
        "constructor" : "Porsche", 
        "model": "911", 
        "type": "coupe" },
    {   "label" : "Audi - A3 - coupe",
        "value" : "AudiA3",
         "constructor" : "Audi", 
        "model": "A3", 
        "type": "coupe" },
    {   
        "label" : "Mercedes - SL500 - coupe",
        "value" : "mercedessl500",
        "constructor" : "Mercedes", 
        "model": "SL500", 
        "type": "coupe" }
];
    $("#quickFind").autocomplete({
        source: function(request, response){
            var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
            response( $.grep( cars, function( value ) {
            return matcher.test(value['constructor']) || matcher.test(value.model) || matcher.test(value.type);
        }));
        }
    });
  });