JQuery UI Autocomplete - Unable to load object

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?

As in when I use the test array, and start typing in the box I get the list of names. But when I use the people object I don't get anything.... — Paul Blundell
– Paul Blundell, Commented Apr 4, 2012 at 16:19
Why are you using different array methods in each case? [] vs new Array() and person[person.length] vs .push()? — Jeff B
– Jeff B, Commented Apr 4, 2012 at 16:44
Is your selector correct? do you have an input id="friend" on the page? — Andrew Whitaker
– Andrew Whitaker, Commented Apr 4, 2012 at 16:49
Works for me (example). Are you sure you put all your code here ? — Didier Ghys
– Didier Ghys, Commented Apr 4, 2012 at 17:00

Jeff B · Accepted Answer · 2012-04-04 17:01:02Z

2

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/

answered Apr 4, 2012 at 17:01

Jeff B

30.1k7 gold badges64 silver badges91 bronze badges

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

2 Comments

Jeff B Over a year ago

Yes, and as he said, the array works, but the object doesn't. This is why his object isn't working like he expects.

Paul Blundell Over a year ago

Yes you are correct, only noticed when jornare posted their answer above. Silly mistake.

jornare · Accepted Answer · 2012-04-04 17:03:45Z

1

try:

people.push({value:person.id,label:person.name});

Like this:

var people = []; 
var obj = {data:[{id:1,name:"Adam"},{id:2,name:"Eve"}]};
$.each(obj.data, function(i,person){ 
        people.push( { 
                label: person.name, 
                value: person.id 
        }); 
}); 
$("#friend").autocomplete({ 
        source: people, 
        select: function(event, ui) { 
            alert(ui.item.name); 
        } 
});

edited Apr 4, 2012 at 17:03

answered Apr 4, 2012 at 16:45

jornare

2,89321 silver badges28 bronze badges

1 Comment

Paul Blundell Over a year ago

Thank you. Turns out I had the label and value the wrong way round, and so what I was looking for wasn't showing but when I searched for IDs instead, the list popped up. Many Thanks!

Collectives™ on Stack Overflow

JQuery UI Autocomplete - Unable to load object

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related