mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
9f62a3faf6
Fix handling of empty response, remove silly open/close handlers, fix select callback, fix demo description. Closes gh-1542
68 lines
2.1 KiB
HTML
68 lines
2.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery UI Autocomplete - Remote JSONP datasource</title>
|
|
<link rel="stylesheet" href="../../themes/base/all.css">
|
|
<script src="../../external/jquery/jquery.js"></script>
|
|
<script src="../../ui/core.js"></script>
|
|
<script src="../../ui/widget.js"></script>
|
|
<script src="../../ui/position.js"></script>
|
|
<script src="../../ui/menu.js"></script>
|
|
<script src="../../ui/autocomplete.js"></script>
|
|
<link rel="stylesheet" href="../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://gd.geobytes.com/AutoCompleteCity",
|
|
dataType: "jsonp",
|
|
data: {
|
|
q: request.term
|
|
},
|
|
success: function( data ) {
|
|
|
|
// Handle 'no match' indicated by [ "" ] response
|
|
response( data.length === 1 && data[ 0 ].length === 0 ? [] : data );
|
|
}
|
|
} );
|
|
},
|
|
minLength: 3,
|
|
select: function( event, ui ) {
|
|
log( "Selected: " + ui.item.label );
|
|
}
|
|
} );
|
|
} );
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="ui-widget">
|
|
<label for="city">Your city: </label>
|
|
<input id="city" type="text">
|
|
Powered by <a href="http://geobytes.com">geobytes.com</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 class="demo-description">
|
|
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least three characters are entered into the field. The datasource is the <a href="http://geobytes.com">geobytes.com webservice</a>. That data is also available in callbacks, as illustrated by the Result area below the input.</p>
|
|
</div>
|
|
</body>
|
|
</html>
|