jQuery Autocomplete update source with object - formatting the array

Question

Im trying to dynamically update jQuery UI source. I can do this fine with an array such as:

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

But need to do it using an object. Before switching to using AJAX, this was working fine on first page load, passing in an array of objects from PHP into Twig:

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

So , how can I replicate this formatting within javascript? I've tried this:

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

But that produces nested objects , which then autocomplete seems not to be able to read properly .

Palpatim · Accepted Answer · 2012-10-30 17:46:29Z

1

The jQueryUI docs indicate that the source array should contain objects with both a label and value properties: http://api.jqueryui.com/autocomplete/#option-source; you don't have a value attribute on your objects.

I'm unclear why this would have worked previously, but here's a modification that worked for me: I changed your prod['title'] to prod['value'], and predeclared prod as a local variable so it wouldn't be autoinstantiated as a global.

Also note, I had to change the "options" call to use an anonymous object; for some reason, trying to invoke $('.searchBox').autocomplete("options", "source", arrProducts); caused an error in my testing fiddle.

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

answered Oct 30, 2012 at 17:46

Palpatim

9,30237 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BobFlemming Over a year ago

Adding in the value was the issue. I then added in a title attribute too.

Collectives™ on Stack Overflow

jQuery Autocomplete update source with object - formatting the array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related