Question

I am trying to get autocomplete working working with JQuery UI, but I am having trouble when I try and pass in a label & value object.

        var people = [];
        var test = new Array();
        var obj = jQuery.parseJSON(data);
        $.each(obj.data, function(i,person){
                people[people.length] = {
                        label: person.id,
                        value: person.name
                };
                test.push(person.name);
        });

        $("#friend").autocomplete({
                source: test,
                select: function(event, ui) {
                    alert(ui.item.id);
                }
        });

When I use the ‘test’ array it is working correctly, but when I try and use the people object nothing seems to be working, an no JS errors either.

What am I missing?

Answer 1

You are loading your people object backwards. Autocomplete works on the label, not the value, so you are autocompleting on your id instead of the name.

label will be the text that is autocomplete uses to match, and value is what is returned when you choose it.

Simply reverse them, and it will work:

 people[people.length] = {
     label: person.name,
     value: person.id
 };

Demo: http://jsfiddle.net/qmmms/1/