使用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

在你的车阵中缺少"label" and "value" options的每一个对象，一起来看看： 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); 
     })); 
     } 
    }); 

    });