jQuery autocomplete with callback ajax json

Question

I'm trying to find a way to use jQuery autocomplete with callback source getting data via an ajax json object list from the server.

Could anybody give some directions?

I googled it but couldn't find a complete solution.

Answer 1

Perfectly good example in the Autocomplete docs with source code.

jQuery

<script>   $(function() {     function log( message ) {       $( "<div>" ).text( message ).prependTo( "#log" );       $( "#log" ).scrollTop( 0 );     }      $( "#city" ).autocomplete({       source: function( request, response ) {         $.ajax({           url: "http://gd.geobytes.com/AutoCompleteCity",           dataType: "jsonp",           data: {             q: request.term           },           success: function( data ) {             response( data );           }         });       },       minLength: 3,       select: function( event, ui ) {         log( ui.item ?           "Selected: " + ui.item.label :           "Nothing selected, input was " + this.value);       },       open: function() {         $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );       },       close: function() {         $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );       }     });   }); </script> 

HTML

<div class="ui-widget">   <label for="city">Your city: </label>   <input id="city">   Powered by <a href="http://geonames.org">geonames.org</a> </div>  <div class="ui-widget" style="margin-top:2em; font-family:Arial">   Result:   <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> </div>