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/custom-data.html | |
| parent | 83244d933c481c6abdb2f957172d991212321d16 (diff) | |
| download | jquery-ui-df932bbba35be7f2e6f741ee114644e536774a76.tar.gz jquery-ui-df932bbba35be7f2e6f741ee114644e536774a76.zip | |
Autocomplete demos: Coding standards.
Diffstat (limited to 'demos/autocomplete/custom-data.html')
| -rw-r--r-- | demos/autocomplete/custom-data.html | 74 |
1 files changed, 36 insertions, 38 deletions
diff --git a/demos/autocomplete/custom-data.html b/demos/autocomplete/custom-data.html index b9de20576..aa097fd58 100644 --- a/demos/autocomplete/custom-data.html +++ b/demos/autocomplete/custom-data.html @@ -1,16 +1,16 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8" /> <title>jQuery UI Autocomplete Custom Data 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> #project-label { display: block; font-weight: bold; @@ -26,42 +26,42 @@ padding: 0; } </style> - <script type="text/javascript"> + <script> $(function() { var projects = [ { - value: 'jquery', - label: 'jQuery', - desc: 'the write less, do more, JavaScript library', - icon: 'jquery_32x32.png' + value: "jquery", + label: "jQuery", + desc: "the write less, do more, JavaScript library", + icon: "jquery_32x32.png" }, { - value: 'jquery-ui', - label: 'jQuery UI', - desc: 'the official user interface library for jQuery', - icon: 'jqueryui_32x32.png' + value: "jquery-ui", + label: "jQuery UI", + desc: "the official user interface library for jQuery", + icon: "jqueryui_32x32.png" }, { - value: 'sizzlejs', - label: 'Sizzle JS', - desc: 'a pure-JavaScript CSS selector engine', - icon: 'sizzlejs_32x32.png' + value: "sizzlejs", + label: "Sizzle JS", + desc: "a pure-JavaScript CSS selector engine", + icon: "sizzlejs_32x32.png" } ]; - - $('#project').autocomplete({ + + $( "#project" ).autocomplete({ minLength: 0, source: projects, - focus: function(event, ui) { - $('#project').val(ui.item.label); + focus: function( event, ui ) { + $( "#project" ).val( ui.item.label ); return false; }, - select: function(event, ui) { - $('#project').val(ui.item.label); - $('#project-id').val(ui.item.value); - $('#project-description').html(ui.item.desc); - $('#project-icon').attr('src', 'images/' + ui.item.icon); - + select: function( event, ui ) { + $( "#project" ).val( ui.item.label ); + $( "#project-id" ).val( ui.item.value ); + $( "#project-description" ).html( ui.item.desc ); + $( "#project-icon" ).attr( "src", "images/" + ui.item.icon ); + return false; } }) @@ -84,13 +84,11 @@ <p id="project-description"></p> </div><!-- End demo --> + + <div class="demo-description"> -<p> -You can use your own custom data formats and displays by simply overriding the default focus and select actions. -</p> -<p> -Try typing "j" to get a list of projects or just press the down arrow. -</p> +<p>You can use your own custom data formats and displays by simply overriding the default focus and select actions.</p> +<p>Try typing "j" to get a list of projects or just press the down arrow.</p> </div><!-- End demo-description --> </body> |