Problem with jQuery Autocomplete

Question

I try to integrate the jQuery Autocomplete plugin [1], but doestn't work for me. Here my code:

$('#input').autocomplete(function(term) {
        var searchUrl = urlBase + 'tagging/autocomplete/?term=' + term;  
    $.getJSON(searchUrl, function(jsonData) {
        test = jsonData;
            console.log(test);
        });
    });

The output from console.log looks like:

[ "EBE", "EBE1", "EBE2"]

For the output i'm using the php function json_encode()

echo json_encode ($words);

Can someone tell me, what is wrong on my code? With the dummy data from the plugin page is working....but not when i try to retrive the data over the URI.

[1] http://docs.jquery.com/Plugins/Autocomplete

Answer 1

You are erroneously passing a function as the first parameter to autocomplete. The method signature is:

autocomplete( url or data, options );

and you're doing:

autocomplete(function(term) {

Instead of that, pass your url as the first parameter, and mod your server code to read the automatically appended 'q' parameter (which represents the term or string in the bound input element):

$('#input').autocomplete('tagging/autocomplete/', {
     formatItem: function(data, i, n, value) {
         return "<font color='#3399CC'>" + value + "</font>";
     },
     formatResult: function(data,value) {
         return value;
     }
}).result(function(event, data, formatted) {
    console.log(data);
});

The manual says:

For remote autocomplete, specify a URL to the resource providing the data. The plugin then requests data with a "q" parameter containing the current search value.

I've never tried to return json to an autocompleter (I'm sure you can) but the above assumes the data returned from the server is separated by a newline "\n" (autocomplete converts those into LIs).