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 ドキュメントは、配列が aとプロパティsourceの両方を持つオブジェクトを含む必要があることを示しています: http://api.jqueryui.com/autocomplete/#option-source ; オブジェクトに属性がありません。labelvaluevalue

なぜこれが以前に機能していたのかは不明ですが、私にとってはうまくいった変更があります。あなた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 に答える