diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2010-09-09 22:24:52 -0400 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2010-09-09 22:33:28 -0400 |
| commit | df932bbba35be7f2e6f741ee114644e536774a76 (patch) | |
| tree | 967ba449667ca5ac54273482abcfa07e35dcf171 /demos/autocomplete/remote-jsonp.html | |
| parent | 83244d933c481c6abdb2f957172d991212321d16 (diff) | |
| download | jquery-ui-df932bbba35be7f2e6f741ee114644e536774a76.tar.gz jquery-ui-df932bbba35be7f2e6f741ee114644e536774a76.zip | |
Autocomplete demos: Coding standards.
Diffstat (limited to 'demos/autocomplete/remote-jsonp.html')
| -rw-r--r-- | demos/autocomplete/remote-jsonp.html | 65 |
1 files changed, 31 insertions, 34 deletions
diff --git a/demos/autocomplete/remote-jsonp.html b/demos/autocomplete/remote-jsonp.html index 127298e36..738bee522 100644 --- a/demos/autocomplete/remote-jsonp.html +++ b/demos/autocomplete/remote-jsonp.html @@ -1,27 +1,28 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8" /> <title>jQuery UI Autocomplete Remote JSONP datasource demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { - function log(message) { - $("<div/>").text(message).prependTo("#log"); - $("#log").attr("scrollTop", 0); + function log( message ) { + $( "<div/>" ).text( message ).prependTo( "#log" ); + $( "#log" ).attr( "scrollTop", 0 ); } - - $("#city").autocomplete({ - source: function(request, response) { + + $( "#city" ).autocomplete({ + source: function( request, response ) { $.ajax({ url: "http://ws.geonames.org/searchJSON", dataType: "jsonp", @@ -31,33 +32,31 @@ maxRows: 12, name_startsWith: request.term }, - success: function(data) { - response($.map(data.geonames, function(item) { + 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); + 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"); + $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" ); }, close: function() { - $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); + $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" ); } }); }); </script> - <style> - .ui-autocomplete-loading { background: url(indicator.gif) no-repeat right; } - #city { width: 25em; } - </style> </head> <body> @@ -76,13 +75,11 @@ </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> +<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> |