2013-11-15 27 views
1

嗨我試圖讓jQuery UI自動完成小部件工作,以便它從我的數組的多個屬性搜索匹配,但是在我的代碼中不起作用。 目前使用jquery自動完成搜索多個值

這個想法是,如果我輸入「轎跑車」,反應將是「保時捷,奧迪,梅賽德斯」。以同樣的方式,我將能夠輸入「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); 
     })); 
     } 
    }); 

    }); 

回答

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); 
     })); 
     } 
    }); 

    }); 
+0

當然,謝謝:) – Falco