jQuery自動完成更新源與對象 - 格式化數組

Question

我試圖動態更新jQuery UI源。我可以用一個數組來做到這一點，例如：

var arrProducts = ['cheese' , 'bread' , 'milk']; 

但是需要用對象來做。切換到使用AJAX之前，這是在第一頁加載做工精細，在對象的數組傳遞從PHP到嫩枝：

var arrProducts = [ 
         {% for product in allproducts %} 
          { 
           title: "{{ product.title }}", 
           url: "{{ product.url }}",         
           label: "{{ product.label }}"        
          }, 
         {% endfor %} 
       ]; 

所以，我怎麼能複製在JavaScript中這種格式？我試過這個：

      var arrProducts = []; 

          $.each(data.products, function(index, product) 
          { 
            prod['title'] = product.title; 
            prod['url'] = product.url; 
            prod['label'] = product.label; 

            arrProducts.push(prod); 
          });       

          $('.searchBox').autocomplete("option", "source", arrProducts); 

但是，這產生嵌套的對象，然後自動完成似乎不能正確讀取。

Answer 1

jQueryUI文檔指示source數組應包含同時具有label和value屬性的對象：http://api.jqueryui.com/autocomplete/#option-source;您的對象上沒有value屬性。

我不清楚爲什麼會以前的工作，但在這裏是爲我工作的修改：我改變了你對prod['title']prod['value']，並預先聲明prod作爲一個局部變量，因此不會被autoinstantiated作爲一個全球性的。

另外請注意，我不得不改變「選項」調用使用匿名對象;由於某種原因，試圖調用$('.searchBox').autocomplete("options", "source", arrProducts);在我的測試小提琴中導致了一個錯誤。

HTML

​<input type="text" class="searchBox"/>​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

的JavaScript

var products = [ 
    { 
     title: 'cheese', 
     url: 'http://www.example.com', 
     label: 'Swiss Cheese' 
    }, 
    { 
     title: 'bread', 
     url: 'http://www.example.com', 
     label: 'Wheat Bread' 
    }, 
    { 
     title: 'milk', 
     url: 'http://www.example.com', 
     label: '1% Milk'}, 
]; 

var arrProducts = []; 

$.each(products, function(index, product) { 
    var prod = {}; 
    prod['value'] = product.title; 
    prod['url'] = product.url; 
    prod['label'] = product.label; 

    arrProducts.push(prod); 
}); 

$('.searchBox').autocomplete({ source: arrProducts });