current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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 .

share|improve this question

1 Answer 1

up vote 1 down vote accepted

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 });
share|improve this answer
    
Adding in the value was the issue. I then added in a title attribute too. –  BobFlemming Oct 31 '12 at 11:11

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.