jquery-ui/demos/autocomplete/remote-jsonp.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>
Demos: Cleanup. 2012-09-10 15:33:46 +00:00			`<!doctype html>`
html pages: added HTML5 meta charset UTF-8 tag, changed DOCTYPE to uppercase 2010-03-12 03:18:34 +00:00			`<html lang="en">`
eol-style and mime-type 2010-01-20 14:00:14 +00:00			`<head>`
Demos: Cleanup. 2010-09-10 02:33:09 +00:00			`<meta charset="utf-8">`
			`<title>jQuery UI Autocomplete - Remote JSONP datasource</title>`
All: Rename all files, removing the "jquery.ui." prefix; - By executing https://gist.github.com/jzaefferer/893fcf70b7eebc1dc271; Fixes #9464 Closes gh-1029 2013-12-02 18:36:12 +00:00			`<link rel="stylesheet" href="../../themes/base/all.css">`
Build: Reorganize external directory Put each external library into its own directory. Move jquery.js to external. Ref gh-1266 2014-06-10 11:55:45 +00:00			`<script src="../../external/jquery/jquery.js"></script>`
All: Rename all files, removing the "jquery.ui." prefix; - By executing https://gist.github.com/jzaefferer/893fcf70b7eebc1dc271; Fixes #9464 Closes gh-1029 2013-12-02 18:36:12 +00:00			`<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>`
Autocomplete demos: Coding standards. 2010-09-10 02:24:52 +00:00			`<link rel="stylesheet" href="../demos.css">`
			`<style>`
Autocomplete demos: Coding standards. 2011-05-27 12:32:48 +00:00			`.ui-autocomplete-loading {`
All: Quote CSS url() values Closes gh-1172 2014-01-24 21:18:30 +00:00			`background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;`
Autocomplete demos: Coding standards. 2011-05-27 12:32:48 +00:00			`}`
Autocomplete demos: Coding standards. 2010-09-10 02:24:52 +00:00			`#city { width: 25em; }`
Autocomplete: Removed styling for .ui-autocomplete-loading from the theme - added to individual demos. Fixes #5385 - Autocomplete: Inconsistent default styling while loading results. We will need to undo this change when ThemeRoller supports generating loading images. 2010-07-19 13:41:21 +00:00			`</style>`
Autocomplete demos: Coding standards. 2010-09-10 02:24:52 +00:00			`<script>`
eol-style and mime-type 2010-01-20 14:00:14 +00:00			`$(function() {`
Autocomplete demos: Coding standards. 2010-09-10 02:24:52 +00:00			`function log( message ) {`
Autocomplete demos: Coding standards. 2011-05-27 12:32:48 +00:00			`$( "<div>" ).text( message ).prependTo( "#log" );`
			`$( "#log" ).scrollTop( 0 );`
eol-style and mime-type 2010-01-20 14:00:14 +00:00			`}`
Autocomplete demos: Coding standards. 2010-09-10 02:24:52 +00:00
			`$( "#city" ).autocomplete({`
			`source: function( request, response ) {`
Autocomplete: Cleanup remote-jsonp demo Fix handling of empty response, remove silly open/close handlers, fix select callback, fix demo description. Closes gh-1542 2015-04-20 12:20:59 +00:00			`$.ajax( {`
Autocomplete: Update remote-jsonp demo with working geo webservice The previous webservice now requires user credentials. The new one is also in use in a jQuery Mobile demo. Fixes #9764 2014-01-29 14:12:59 +00:00			`url: "http://gd.geobytes.com/AutoCompleteCity",`
eol-style and mime-type 2010-01-20 14:00:14 +00:00			`dataType: "jsonp",`
			`data: {`
Autocomplete: Update remote-jsonp demo with working geo webservice The previous webservice now requires user credentials. The new one is also in use in a jQuery Mobile demo. Fixes #9764 2014-01-29 14:12:59 +00:00			`q: request.term`
eol-style and mime-type 2010-01-20 14:00:14 +00:00			`},`
Autocomplete demos: Coding standards. 2010-09-10 02:24:52 +00:00			`success: function( data ) {`
Autocomplete: Cleanup remote-jsonp demo Fix handling of empty response, remove silly open/close handlers, fix select callback, fix demo description. Closes gh-1542 2015-04-20 12:20:59 +00:00
			`// Handle 'no match' indicated by [ "" ] response`
			`response( data.length === 1 && data[ 0 ].length === 0 ? [] : data );`
eol-style and mime-type 2010-01-20 14:00:14 +00:00			`}`
Autocomplete: Cleanup remote-jsonp demo Fix handling of empty response, remove silly open/close handlers, fix select callback, fix demo description. Closes gh-1542 2015-04-20 12:20:59 +00:00			`} );`
eol-style and mime-type 2010-01-20 14:00:14 +00:00			`},`
Autocomplete demo: Datasource needs min. 3 characters 2014-04-23 17:56:48 +00:00			`minLength: 3,`
Autocomplete demos: Coding standards. 2010-09-10 02:24:52 +00:00			`select: function( event, ui ) {`
Autocomplete: Cleanup remote-jsonp demo Fix handling of empty response, remove silly open/close handlers, fix select callback, fix demo description. Closes gh-1542 2015-04-20 12:20:59 +00:00			`log( "Selected: " + ui.item.label );`
eol-style and mime-type 2010-01-20 14:00:14 +00:00			`}`
Autocomplete: Cleanup remote-jsonp demo Fix handling of empty response, remove silly open/close handlers, fix select callback, fix demo description. Closes gh-1542 2015-04-20 12:20:59 +00:00			`} );`
			`} );`
eol-style and mime-type 2010-01-20 14:00:14 +00:00			`</script>`
			`</head>`
			`<body>`

			`<div class="ui-widget">`
			`<label for="city">Your city: </label>`
Autocomplete: Cleanup remote-jsonp demo Fix handling of empty response, remove silly open/close handlers, fix select callback, fix demo description. Closes gh-1542 2015-04-20 12:20:59 +00:00			`<input id="city" type="text">`
			`Powered by <a href="http://geobytes.com">geobytes.com</a>`
eol-style and mime-type 2010-01-20 14:00:14 +00:00			`</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">`
Autocomplete: Cleanup remote-jsonp demo Fix handling of empty response, remove silly open/close handlers, fix select callback, fix demo description. Closes gh-1542 2015-04-20 12:20:59 +00:00			`<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>`
Demos: Cleanup. 2012-09-10 15:33:46 +00:00			`</div>`
eol-style and mime-type 2010-01-20 14:00:14 +00:00			`</body>`
			`</html>`