私は最初の実際のサイトを構築しています。とりわけ、ユーザーが場所を選択できるフィールドを実装しようとしています (オートコンプリートを使用して、それらが正しいことを確認します)。私はこの完璧な選択に出くわしましたhttp://jqueryui.com/demos/autocomplete/#remote-jsonp。私はjsonやjqueryを使用したことがないので、指定されたコードをコピーして貼り付けて、それがどのように機能するかを確認し、それが私にとって良いかどうか、または変更を加える必要があるかどうかを確認しようとしました. しかし、試してみると、オートコンプリートが機能しません。最初にjqueryを参照したときに何かを見落としていると思いますが、何がわかりません。答えは本当に単純なものだと思いますが、私は誤解しましたが、誰かが助けてくれれば私は感謝しています.これは私が使用しているコードです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Remote JSONP datasource</title>
<link rel="stylesheet" href="jqueryui.com/themes/base/jquery.ui.all.css">
<script src="jqueryui.com/jquery-1.7.2.js"></script>
<script src="jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="jqueryui.com/ui/jquery.ui.position.js"></script>
<script src="jqueryui.com/ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="jqueryui.com/demos/demos.css">
<style>
.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
#city { width: 25em; }
</style>
<script>
$(function() {
function log( message ) {
$( "<div/>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://ws.geonames.org/searchJSON",
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function( data ) {
response( $.map( data.geonames, function( item ) {
return {
label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
value: item.name
}
}));
}
});
},
minLength: 2,
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>
</head>
<body>
<div class="demo">
<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>
</div><!-- End demo -->
<div class="demo-description">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least two characters are entered into the field.</p>
<p>In this case, the datasource is the <a href="http://geonames.org">geonames.org webservice</a>. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input.</p>
</div><!-- End demo-description -->
</body>
</html>