jquery-ui/demos/autocomplete/remote-jsonp.html at de1296b98515c586d620c40b6c566129f5013208 · JasonKimy/jquery-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery UI Autocomplete - Remote JSONP datasource</title>
	<link rel="stylesheet" href="../../themes/base/all.css">
	<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 src="../../external/requirejs/require.js"></script>
	<script src="../bootstrap.js">
		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>