jquery ajax自动完成,带有回调Ajax JSON的jQuery自动完成

小编典典

带有源代码的自动完成文档中的完美示例。

jQuery

$(function() {

function log( message ) {

$( "

" ).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" );

}

});

});

HTML

Your city:

Powered by geonames.org

Result:

2020-07-27