diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2016-09-01 15:55:25 -0400 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2016-09-01 15:55:25 -0400 |
| commit | 930934f4d22ce4397bcc85cde33c32acef2ec622 (patch) | |
| tree | 9d7db6cc6973bdc5beaf68c81b3fe9e7174970a9 | |
| parent | 586d572ad2667f8f4c974f9e48d8ce7a4519af0c (diff) | |
| download | jquery-ui-930934f4d22ce4397bcc85cde33c32acef2ec622.tar.gz jquery-ui-930934f4d22ce4397bcc85cde33c32acef2ec622.zip | |
Autocomplete: Change JSONP demo to use local data source
Fixes #14974
| -rw-r--r-- | demos/autocomplete/remote-jsonp.html | 23 | ||||
| -rw-r--r-- | demos/autocomplete/search.php | 13 |
2 files changed, 19 insertions, 17 deletions
diff --git a/demos/autocomplete/remote-jsonp.html b/demos/autocomplete/remote-jsonp.html index d43dbbb75..45976bb2c 100644 --- a/demos/autocomplete/remote-jsonp.html +++ b/demos/autocomplete/remote-jsonp.html @@ -10,7 +10,6 @@ .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"> @@ -19,24 +18,22 @@ $( "#log" ).scrollTop( 0 ); } - $( "#city" ).autocomplete({ + $( "#birds" ).autocomplete({ source: function( request, response ) { $.ajax( { - url: "http://gd.geobytes.com/AutoCompleteCity", + url: "search.php", dataType: "jsonp", data: { - q: request.term + term: request.term }, success: function( data ) { - - // Handle 'no match' indicated by [ "" ] response - response( data.length === 1 && data[ 0 ].length === 0 ? [] : data ); + response( data ); } } ); }, - minLength: 3, + minLength: 2, select: function( event, ui ) { - log( "Selected: " + ui.item.label ); + log( "Selected: " + ui.item.value + " aka " + ui.item.id ); } } ); </script> @@ -44,9 +41,8 @@ <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> + <label for="birds">Birds: </label> + <input id="birds"> </div> <div class="ui-widget" style="margin-top:2em; font-family:Arial"> @@ -55,7 +51,8 @@ </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> +<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.</p> +<p>The datasource is a server-side script which returns JSONP data, specified via a function which uses <code>jQuery.ajax()</code> for the <code>source</code> option.</p> </div> </body> </html> diff --git a/demos/autocomplete/search.php b/demos/autocomplete/search.php index 04bda4224..489b30c1e 100644 --- a/demos/autocomplete/search.php +++ b/demos/autocomplete/search.php @@ -1,6 +1,6 @@ <?php -sleep( 3 ); +sleep( 2 ); // no term passed - just exit early with no response if (empty($_GET['term'])) exit ; $q = strtolower($_GET["term"]); @@ -573,7 +573,6 @@ $items = array( "Heuglin's Gull"=>"Larus heuglini" ); - $result = array(); foreach ($items as $key=>$value) { if (strpos(strtolower($key), $q) !== false) { @@ -584,6 +583,12 @@ foreach ($items as $key=>$value) { } // json_encode is available in PHP 5.2 and above, or you can install a PECL module in earlier versions -echo json_encode($result); +$output = json_encode($result); + +if ($_GET["callback"]) { + $output = $_GET["callback"] . "($output);"; +} + +echo $output; -?>
\ No newline at end of file +?> |