Question

I’ve been struggling to get the jQuery UI autocomplete to work using a remote source. I get the correct results for each request (using Chromes Inspector), but the dropdown box is not displayed for some reason. Here’s the search field:

<form action={'/content/search'|ezurl} class="search-form">
    <fieldset>
        <input type="text" id="Search" name="Search" class="text" />
        <input type="submit" name="SearchButton" class="submit" value="search" />
    </fieldset>
</form>

And the javascript:

$(function() {

$("#Search").autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "/content/search",
                dataType: "get",
                data: {
                    maxRows: 12,
                    query: request.term,
                    filter: 'author'
                }
            });
        },
        type:"json",
        select: function(event, ui) 
        {
            window.location =  ui.item.url;
        }
   });
});

Which returns:

[{"html":"<li><a href=\/Author\/Per_Asmund\/(language)\/nor-NO>Asmund, Per<\/a><\/li>","url":"\/Forfattere\/Per_Asmund\/(language)\/nor-NO","id":"210"},
{"html":"<li><a href=\/Forfattere\/Per_AErlend\/(language)\/nor-NO>Erlend, Per<\/a><\/li>","url":"\/Forfattere\/Per_AErlend\/(language)\/nor-NO","id":"238"}]

I’m probably just missing something, but I can’t for the life of me figure it out. Any help is deeply appreciated!

Answer 1

You missed the response call in your source param

      $.ajax({
            url: "/content/search",
            dataType: "JSON", // edit: fixed ;)
            data: {
                maxRows: 12,
                query: request.term,
                filter: 'author'
            },
            success: function(data) { response(data); } // add this line
        });

But maybe some more simple usage should be better in this case.