![json的jQuery自动完成]( "json的jQuery自动完成")
本文介绍了带有回调ajax json的jQuery自动完成的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试找到一种方法来使用 jQuery 自动完成和回调源，通过来自服务器的 ajax json 对象列表获取数据.
谁能指点迷津?
我用谷歌搜索但找不到完整的解决方案.
解决方案
自动完成文档 带有源代码.
jQuery
HTML
<label for="city">您所在的城市:</label><输入id=城市">由 <a href="http://geonames.org">geonames.org</a> 提供支持
<div class="ui-widget" style="margin-top:2em; font-family:Arial">结果:<div id="log" style="height: 200px; width: 300px; overflow: auto;"class="ui-widget-content"></div>
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.
解决方案
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>
这篇关于带有回调ajax json的jQuery自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！