CODEWITHSUNDEEP
jqueryjquery-uiautocomplete
calicode
calicode

Reputation: 237

jquery ui autocomplete - server results not appearing

jQuery UI autocomplete is fetching valid json results from the server, but does not insert them into DOM / display in browser. When I embed the results in the page, autocomplete works as expected.

Javascript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>

    $('#query').autocomplete({
        source: '/ajax/abc',
        /*source: ['alpha', 'beta', 'gamma'],*/
        minLength: 2,
        select: function(e,ui) {
            $('#query').val( ui.item.value );
            $('form#search').submit(); 
        }
    });

JSON result from /ajax/abc (detected using Firebug):

["alpha","beta","gamma"]

Generated source from Firefox after typing "gam" into the input

(Server):

<ul style="z-index: 1; top: 0px; left: 0px; display: none;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"></ul>

(Embedded results):

<ul style="z-index: 1; top: 31px; left: 185px; display: block; width: 149px;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"><li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all">gamma</a></li></ul>

Upvotes: 0

Views: 1852

Answers (4)

calicode
calicode

Reputation: 237

There was a conflict with the jquery validation plugin which I had downloaded a few weeks ago. I'm not sure exactly what the conflict was, but I identified it by commenting out each script one at a time.

I downloaded the latest, minified version of jquery validation from CDN, which solved the problem.

Upvotes: 1

Manuel Richarz
Manuel Richarz

Reputation: 1926

In worst case you can set a function as source. in this function you can give an array in response. Also you can load your JSON in this function.

source: function(request, response) {
   /*
    * response is the typed text like 'gam'
    * request is the function that you have to call with the results
    */
   /* here your code */
   response(results);
}

Upvotes: 0

Manuel Richarz
Manuel Richarz

Reputation: 1926

Maybe the mime-type is wrong so that jQuery doesnt' handle the json as json. Check the mime-type of your output json. It has to be 'application/json'

Upvotes: 0

CrazyDart
CrazyDart

Reputation: 3801

Does your remote server return the correct header to allow this?

Access-Control-Allow-Origin: *

see this example: http://jqueryui.com/demos/autocomplete/remote-jsonp.html The result returns a header with that in it. This is needed for cross server calls.

Upvotes: 0

Related Questions