Question

I’m trying to get the jQuery UI autocomplete widget to work but I’m having some issues.
First, I tried to retrieve some data from the database and store them inside a hidden <p> tag in the form of: item1 ; item2; item3; and then using jQuery reference this tag and get its content using .html() (result was null) or .text() (result was empty string). Then I decided to do all of this locally inside the jQuery block and did the following:

var tags = "house ; children's room ; master bedroom ... etc"
    alert(tags); //returns them in the right format
    var availableTags = tags.split(' ;');
    alert(availableTags); //returns them in the form" item1, item2, item3
    alert(availableTags[1]); //returns children's room
    $(".liTagInput").autocomplete({ 
        minLength: 2,
        source: availableTags 
    });

But that still doesn’t get the autocomplete to work… Why is it not working? I made sure I added the CSS as well, so that shouldn’t be the problem…

Theoretically, I would still want to retrieve the data from the database. In this instance, I would want just echo the tags to the html page and then do as described at the beginning. In other cases where the result could be too big, I would want to get them via AJAX but that’s another story… I need to get this to work first and then I’ll worry about that more complex scenarios 🙂

Any help is greatly appreciated!

Answer 1

Your demo works as coded here: http://jsfiddle.net/aXuHq/

Some other tips:

• Did you inspect the hidden element you’re appending the items to to make sure the contents are what you expect?
• You could also just echo the tags into a JavaScript array (not sure what server-side technology you’re using so I won’t be able to provide an example), and pass that directly to autocomplete.
• Using AJAX with autocomplete isn’t too bad to set up, check out the demo.