0

我试图动态更新 jQuery UI 源。我可以用一个数组很好地做到这一点，例如：

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

但需要使用对象来完成。在切换到使用 AJAX 之前，这在第一页加载时运行良好，将一组对象从 PHP 传递到 Twig：

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

但这会产生嵌套对象，然后自动完成似乎无法正确读取。

4

1 回答 1

1

jQueryUI 文档表明该source数组应包含具有 alabel和value属性的对象：http://api.jqueryui.com/autocomplete/#option-source；您的对象没有value属性。

我不清楚为什么这以前会起作用，但这里有一个对我有用的修改：我将您更改prod['title']为prod['value'], 并预先声明prod为局部变量，因此它不会自动实例化为全局变量。

另请注意，我必须更改“选项”调用以使用匿名对象；出于某种原因，尝试调用$('.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 });
于 2012-10-30T17:46:29.870 回答