diff options
Diffstat (limited to 'demos/autocomplete')
19 files changed, 606 insertions, 428 deletions
diff --git a/demos/autocomplete/categories.html b/demos/autocomplete/categories.html index bb59bf31e..163c969dd 100644 --- a/demos/autocomplete/categories.html +++ b/demos/autocomplete/categories.html @@ -1,25 +1,26 @@ <!DOCTYPE html> <html lang="en"> <head> - <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"> + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - Categories</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.menu.js"></script> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> .ui-autocomplete-category { - font-weight:bold; - padding:.2em .4em; - margin:.8em 0 .2em; - line-height:1.5; + font-weight: bold; + padding: .2em .4em; + margin: .8em 0 .2em; + line-height: 1.5; } </style> - <script type="text/javascript"> - $.widget("custom.catcomplete", $.ui.autocomplete, { + <script> + $.widget( "custom.catcomplete", $.ui.autocomplete, { _renderMenu: function( ul, items ) { var self = this, currentCategory = ""; @@ -33,7 +34,7 @@ } }); </script> - <script type="text/javascript"> + <script> $(function() { var data = [ { label: "anders", category: "" }, @@ -47,7 +48,7 @@ { label: "andreas johnson", category: "People" } ]; - $('#search').catcomplete({ + $( "#search" ).catcomplete({ delay: 0, source: data }); @@ -61,10 +62,10 @@ <input id="search" /> </div><!-- End demo --> + + <div class="demo-description"> -<p> - A categorized search result. Try typing "a" or "n". -</p> +<p>A categorized search result. Try typing "a" or "n".</p> </div><!-- End demo-description --> </body> diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html index 596423bc9..fd373f0e4 100644 --- a/demos/autocomplete/combobox.html +++ b/demos/autocomplete/combobox.html @@ -1,101 +1,135 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Combobox 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.button.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - /* TODO shouldn't be necessary */ - .ui-button { margin-left: -1px; } - .ui-button-icon-only .ui-button-text { padding: 0.35em; } - .ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; } + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - Combobox</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.menu.js"></script> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <script src="../../ui/jquery.ui.tooltip.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .ui-button { margin-left: -1px; } + .ui-button-icon-only .ui-button-text { padding: 0.35em; } + .ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; } </style> - <script type="text/javascript"> - (function($) { - $.widget("ui.combobox", { + <script> + (function( $ ) { + $.widget( "ui.combobox", { _create: function() { - var self = this; - var select = this.element.hide(); - var input = $("<input>") - .insertAfter(select) + var self = this, + select = this.element.hide(), + selected = select.children( ":selected" ), + value = selected.val() ? selected.text() : ""; + var input = this.input = $( "<input>" ) + .insertAfter( select ) + .val( value ) .autocomplete({ - source: function(request, response) { - var matcher = new RegExp(request.term, "i"); - response(select.children("option").map(function() { - var text = $(this).text(); - if (this.value && (!request.term || matcher.test(text))) + delay: 0, + minLength: 0, + source: function( request, response ) { + var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" ); + response( select.children( "option" ).map(function() { + var text = $( this ).text(); + if ( this.value && ( !request.term || matcher.test(text) ) ) return { - id: this.value, - label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"), - value: text + label: text.replace( + new RegExp( + "(?![^&;]+;)(?!<[^<>]*)(" + + $.ui.autocomplete.escapeRegex(request.term) + + ")(?![^<>]*>)(?![^&;]+;)", "gi" + ), "<strong>$1</strong>" ), + value: text, + option: this }; - })); + }) ); }, - delay: 0, - change: function(event, ui) { - if (!ui.item) { - var value = this.value; - // remove invalid value, as it didn't match anything, and display a hint - $(this).val("").attr("title", value + " didn't match any item").tooltip("open"); - setTimeout(function() { - input.tooltip("close").attr("title", ""); - }, 2500); - return false; - } - select.val(ui.item.id); - self._trigger("selected", event, { - item: select.find("[value='" + ui.item.id + "']") + select: function( event, ui ) { + ui.item.option.selected = true; + self._trigger( "selected", event, { + item: ui.item.option }); - }, - minLength: 0 + change: function( event, ui ) { + if ( !ui.item ) { + var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ), + valid = false; + select.children( "option" ).each(function() { + if ( $( this ).text().match( matcher ) ) { + this.selected = valid = true; + return false; + } + }); + if ( !valid ) { + // remove invalid value, as it didn't match anything + $(this).val( "").attr( "title", value + " didn't match any item" ).tooltip( "open" ); + setTimeout( function() { + input.tooltip( "close" ).attr( "title", "" ); + }, 2500 ); + input.data( "autocomplete" ).term = ""; + return false; + } + } + } + }) + .addClass( "ui-widget ui-widget-content ui-corner-left" ); + + input.data( "autocomplete" )._renderItem = function( ul, item ) { + return $( "<li></li>" ) + .data( "item.autocomplete", item ) + .append( "<a>" + item.label + "</a>" ) + .appendTo( ul ); + }; + + this.button = $( "<button type='button'> </button>" ) + .attr( "tabIndex", -1 ) + .attr( "title", "Show All Items" ) + .insertAfter( input ) + .button({ + icons: { + primary: "ui-icon-triangle-1-s" + }, + text: false }) - .addClass("ui-widget ui-widget-content ui-corner-left"); - var button = $("<button> </button>") - .attr("tabIndex", -1) - .attr("title", "Show All Items") - .insertAfter(input) - .button({ - icons: { - primary: "ui-icon-triangle-1-s" - }, - text: false - }).removeClass("ui-corner-all") - .addClass("ui-corner-right ui-button-icon") - .click(function() { - // close if already visible - if (input.autocomplete("widget").is(":visible")) { - input.autocomplete("close"); - return; - } - // pass empty string as value to search for, displaying all results - input.autocomplete("search", ""); - input.focus(); - }); - - input.tooltip({ - position: { - offset: (button.width() + 5) + " 0" - }, - tooltipClass: "ui-state-highlight" - }); + .removeClass( "ui-corner-all" ) + .addClass( "ui-corner-right ui-button-icon" ) + .click(function() { + // close if already visible + if ( input.autocomplete( "widget" ).is( ":visible" ) ) { + input.autocomplete( "close" ); + return; + } + + // pass empty string as value to search for, displaying all results + input.autocomplete( "search", "" ); + input.focus(); + }); + + input.tooltip( { + position: { + offset: (this.button.width() + 5) + " 0" + } + }).tooltip( "widget" ).addClass( "ui-state-highlight" ); + }, + + destroy: function() { + this.input.remove(); + this.button.remove(); + this.element.show(); + $.Widget.prototype.destroy.call( this ); } }); + })( jQuery ); - })(jQuery); - $(function() { - $("#combobox").combobox(); - $("#toggle").click(function() { - $("#combobox").toggle(); + $( "#combobox" ).combobox(); + $( "#toggle" ).click(function() { + $( "#combobox" ).toggle(); }); }); </script> @@ -108,32 +142,39 @@ <label>Your preferred programming language: </label> <select id="combobox"> <option value="">Select one...</option> - <option value="a">asp</option> - <option value="c">c</option> - <option value="cpp">c++</option> - <option value="cf">coldfusion</option> - <option value="g">groovy</option> - <option value="h">haskell</option> - <option value="j">java</option> - <option value="js">javascript</option> - <option value="p1">perl</option> - <option value="p2">php</option> - <option value="p3">python</option> - <option value="r">ruby</option> - <option value="s">scala</option> + <option value="ActionScript">ActionScript</option> + <option value="AppleScript">AppleScript</option> + <option value="Asp">Asp</option> + <option value="BASIC">BASIC</option> + <option value="C">C</option> + <option value="C++">C++</option> + <option value="Clojure">Clojure</option> + <option value="COBOL">COBOL</option> + <option value="ColdFusion">ColdFusion</option> + <option value="Erlang">Erlang</option> + <option value="Fortran">Fortran</option> + <option value="Groovy">Groovy</option> + <option value="Haskell">Haskell</option> + <option value="Java">Java</option> + <option value="JavaScript">JavaScript</option> + <option value="Lisp">Lisp</option> + <option value="Perl">Perl</option> + <option value="PHP">PHP</option> + <option value="Python">Python</option> + <option value="Ruby">Ruby</option> + <option value="Scala">Scala</option> + <option value="Scheme">Scheme</option> </select> </div> <button id="toggle">Show underlying select</button> </div><!-- End demo --> + + <div class="demo-description"> -<p> -A custom widget built by composition of Autocomplete and Button. You can either type something into the field to get filtered suggestions based on your input, or use the button to get the full list of selections. -</p> -<p> -The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option. -</p> +<p>A custom widget built by composition of Autocomplete and Button. You can either type something into the field to get filtered suggestions based on your input, or use the button to get the full list of selections.</p> +<p>The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option.</p> </div><!-- End demo-description --> </body> diff --git a/demos/autocomplete/custom-data.html b/demos/autocomplete/custom-data.html index 139b41d99..8a3a0b235 100644 --- a/demos/autocomplete/custom-data.html +++ b/demos/autocomplete/custom-data.html @@ -1,16 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <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"> + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - Custom data and display</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.menu.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 +27,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; } }) @@ -78,19 +79,17 @@ <div class="demo"> <div id="project-label">Select a project (type "j" for a start):</div> - <img id="project-icon" src="../images/transparent_1x1.png" class="ui-state-default"/> + <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default"/> <input id="project"/> <input type="hidden" id="project-id"/> <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> diff --git a/demos/autocomplete/default.html b/demos/autocomplete/default.html index d78b0576c..9de61467f 100644 --- a/demos/autocomplete/default.html +++ b/demos/autocomplete/default.html @@ -1,19 +1,43 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Default 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" /> - <script type="text/javascript"> + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - Default functionality</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.menu.js"></script> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]; - $("#tags").autocomplete({ + var availableTags = [ + "ActionScript", + "AppleScript", + "Asp", + "BASIC", + "C", + "C++", + "Clojure", + "COBOL", + "ColdFusion", + "Erlang", + "Fortran", + "Groovy", + "Haskell", + "Java", + "JavaScript", + "Lisp", + "Perl", + "PHP", + "Python", + "Ruby", + "Scala", + "Scheme" + ]; + $( "#tags" ).autocomplete({ source: availableTags }); }); @@ -30,13 +54,11 @@ </div><!-- End demo --> + + <div class="demo-description"> -<p> -The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try. -</p> -<p> -The datasource is a simple JavaScript array, provided to the widget using the source-option. -</p> +<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p> +<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p> </div><!-- End demo-description --> </body> diff --git a/demos/autocomplete/folding.html b/demos/autocomplete/folding.html index d5bc71e9d..cea358a8d 100644 --- a/demos/autocomplete/folding.html +++ b/demos/autocomplete/folding.html @@ -1,25 +1,26 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Accent Folding 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" /> - <script type="text/javascript"> + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - Accent folding</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.menu.js"></script> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ]; var accentMap = { - 'á':'a', - 'ö':'o' + "á": "a", + "ö": "o" }; var normalize = function( term ) { - var ret = ''; + var ret = ""; for ( var i = 0; i < term.length; i++ ) { ret += accentMap[ term.charAt(i) ] || term.charAt(i); } @@ -51,13 +52,11 @@ </div><!-- End demo --> + + <div class="demo-description"> -<p> -The autocomplete field uses a custom source option which will match results that have accented characters even when the text field doesn't contain accented characters. However if the you type in accented characters in the text field it is smart enough not to show results that aren't accented. -</p> -<p> -Try typing "Jo" to see "John" and "Jörn", then type "Jö" to see only "Jörn". -</p> +<p>The autocomplete field uses a custom source option which will match results that have accented characters even when the text field doesn't contain accented characters. However if the you type in accented characters in the text field it is smart enough not to show results that aren't accented.</p> +<p>Try typing "Jo" to see "John" and "Jörn", then type "Jö" to see only "Jörn".</p> </div><!-- End demo-description --> </body> diff --git a/demos/autocomplete/images/jquery_32x32.png b/demos/autocomplete/images/jquery_32x32.png Binary files differnew file mode 100644 index 000000000..9312f02d5 --- /dev/null +++ b/demos/autocomplete/images/jquery_32x32.png diff --git a/demos/autocomplete/images/jqueryui_32x32.png b/demos/autocomplete/images/jqueryui_32x32.png Binary files differnew file mode 100644 index 000000000..e003d16c1 --- /dev/null +++ b/demos/autocomplete/images/jqueryui_32x32.png diff --git a/demos/autocomplete/images/sizzlejs_32x32.png b/demos/autocomplete/images/sizzlejs_32x32.png Binary files differnew file mode 100644 index 000000000..4ce0704d1 --- /dev/null +++ b/demos/autocomplete/images/sizzlejs_32x32.png diff --git a/demos/autocomplete/images/transparent_1x1.png b/demos/autocomplete/images/transparent_1x1.png Binary files differnew file mode 100644 index 000000000..c2da5b889 --- /dev/null +++ b/demos/autocomplete/images/transparent_1x1.png diff --git a/demos/autocomplete/images/ui-anim_basic_16x16.gif b/demos/autocomplete/images/ui-anim_basic_16x16.gif Binary files differnew file mode 100644 index 000000000..084ecb879 --- /dev/null +++ b/demos/autocomplete/images/ui-anim_basic_16x16.gif diff --git a/demos/autocomplete/index.html b/demos/autocomplete/index.html index ba96d994e..77f801996 100644 --- a/demos/autocomplete/index.html +++ b/demos/autocomplete/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Autocomplete Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> <div class="demos-nav"> @@ -13,10 +13,12 @@ <li><a href="remote.html">Remote datasource</a></li> <li><a href="remote-with-cache.html">Remote with caching</a></li> <li><a href="remote-jsonp.html">Remote JSONP datasource</a></li> + <li><a href="maxheight.html">Scrollable results</a></li> <li><a href="combobox.html">Combobox</a></li> <li><a href="custom-data.html">Custom data and display</a></li> <li><a href="xml.html">XML data parsed once</a></li> <li><a href="categories.html">Categories</a></li> + <li><a href="folding.html">Accent folding</a></li> <li><a href="multiple.html">Multiple values</a></li> <li><a href="multiple-remote.html">Multiple, remote</a></li> </ul> diff --git a/demos/autocomplete/maxheight.html b/demos/autocomplete/maxheight.html new file mode 100644 index 000000000..7e0e0f903 --- /dev/null +++ b/demos/autocomplete/maxheight.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - Scrollable results</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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 { + max-height: 100px; + overflow-y: auto; + /* prevent horizontal scrollbar */ + overflow-x: hidden; + /* add padding to account for vertical scrollbar */ + padding-right: 20px; + } + /* IE 6 doesn't support max-height + * we use height instead, but this forces the menu to always be this tall + */ + * html .ui-autocomplete { + height: 100px; + } + </style> + <script> + $(function() { + var availableTags = [ + "ActionScript", + "AppleScript", + "Asp", + "BASIC", + "C", + "C++", + "Clojure", + "COBOL", + "ColdFusion", + "Erlang", + "Fortran", + "Groovy", + "Haskell", + "Java", + "JavaScript", + "Lisp", + "Perl", + "PHP", + "Python", + "Ruby", + "Scala", + "Scheme" + ]; + $( "#tags" ).autocomplete({ + source: availableTags + }); + }); + </script> +</head> +<body> + +<div class="demo"> + +<div class="ui-widget"> + <label for="tags">Tags: </label> + <input id="tags" /> +</div> + +</div><!-- End demo --> + + + +<div class="demo-description"> +<p>When displaying a long list of options, you can simply set the max-height for the autocomplete menu to prevent the menu from growing too large. Try typing "a" or "s" above to get a long list of results that you can scroll through.</p> +</div><!-- End demo-description --> + +</body> +</html> diff --git a/demos/autocomplete/multiple-remote.html b/demos/autocomplete/multiple-remote.html index 5e0f4b50b..f0ea7aafd 100644 --- a/demos/autocomplete/multiple-remote.html +++ b/demos/autocomplete/multiple-remote.html @@ -1,53 +1,66 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete multiple 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" /> - <script type="text/javascript"> +<<<<<<< HEAD + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - Multiple, remote</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.menu.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; } + </style> + <script> $(function() { - function split(val) { - return val.split(/,\s*/); + function split( val ) { + return val.split( /,\s*/ ); } - function extractLast(term) { - return split(term).pop(); + function extractLast( term ) { + return split( term ).pop(); } - - $("#birds").autocomplete({ - source: function(request, response) { - $.getJSON("search.php", { - term: extractLast(request.term) - }, response); - }, - search: function() { - // custom minLength - var term = extractLast(this.value); - if (term.length < 2) { + + $( "#birds" ) + // don't navigate away from the field on tab when selecting an item + .bind( "keydown", function( event ) { + if ( event.keyCode === $.ui.keyCode.TAB && + $( this ).data( "autocomplete" ).menu.active ) { + event.preventDefault(); + } + }) + .autocomplete({ + source: function( request, response ) { + $.getJSON( "search.php", { + term: extractLast( request.term ) + }, response ); + }, + search: function() { + // custom minLength + var term = extractLast( this.value ); + if ( term.length < 2 ) { + return false; + } + }, + focus: function() { + // prevent value inserted on focus + return false; + }, + select: function( event, ui ) { + var terms = split( this.value ); + // remove the current input + terms.pop(); + // add the selected item + terms.push( ui.item.value ); + // add placeholder to get the comma-and-space at the end + terms.push( "" ); + this.value = terms.join( ", " ); return false; } - }, - focus: function() { - // prevent value inserted on focus - return false; - }, - select: function(event, ui) { - var terms = split( this.value ); - // remove the current input - terms.pop(); - // add the selected item - terms.push( ui.item.value ); - // add placeholder to get the comma-and-space at the end - terms.push(""); - this.value = terms.join(", "); - return false; - } - }); + }); }); </script> </head> @@ -62,13 +75,11 @@ </div><!-- End demo --> + + <div class="demo-description"> -<p> -Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names. -</p> -<p> -This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field. -</p> +<p>Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names.</p> +<p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p> </div><!-- End demo-description --> </body> diff --git a/demos/autocomplete/multiple.html b/demos/autocomplete/multiple.html index 908cfe6ce..0b8e14478 100644 --- a/demos/autocomplete/multiple.html +++ b/demos/autocomplete/multiple.html @@ -1,47 +1,80 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete multiple 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" /> - <script type="text/javascript"> + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - Multiple values</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.menu.js"></script> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]; - function split(val) { - return val.split(/,\s*/); + var availableTags = [ + "ActionScript", + "AppleScript", + "Asp", + "BASIC", + "C", + "C++", + "Clojure", + "COBOL", + "ColdFusion", + "Erlang", + "Fortran", + "Groovy", + "Haskell", + "Java", + "JavaScript", + "Lisp", + "Perl", + "PHP", + "Python", + "Ruby", + "Scala", + "Scheme" + ]; + function split( val ) { + return val.split( /,\s*/ ); } - function extractLast(term) { - return split(term).pop(); + function extractLast( term ) { + return split( term ).pop(); } - - $("#tags").autocomplete({ - minLength: 0, - source: function(request, response) { - // delegate back to autocomplete, but extract the last term - response($.ui.autocomplete.filter(availableTags, extractLast(request.term))); - }, - focus: function() { - // prevent value inserted on focus - return false; - }, - select: function(event, ui) { - var terms = split( this.value ); - // remove the current input - terms.pop(); - // add the selected item - terms.push( ui.item.value ); - // add placeholder to get the comma-and-space at the end - terms.push(""); - this.value = terms.join(", "); - return false; - } - }); + + $( "#tags" ) + // don't navigate away from the field on tab when selecting an item + .bind( "keydown", function( event ) { + if ( event.keyCode === $.ui.keyCode.TAB && + $( this ).data( "autocomplete" ).menu.active ) { + event.preventDefault(); + } + }) + .autocomplete({ + minLength: 0, + source: function( request, response ) { + // delegate back to autocomplete, but extract the last term + response( $.ui.autocomplete.filter( + availableTags, extractLast( request.term ) ) ); + }, + focus: function() { + // prevent value inserted on focus + return false; + }, + select: function( event, ui ) { + var terms = split( this.value ); + // remove the current input + terms.pop(); + // add the selected item + terms.push( ui.item.value ); + // add placeholder to get the comma-and-space at the end + terms.push( "" ); + this.value = terms.join( ", " ); + return false; + } + }); }); </script> </head> @@ -56,13 +89,11 @@ </div><!-- End demo --> + + <div class="demo-description"> -<p> -Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more. -</p> -<p> -This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field. -</p> +<p>Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.</p> +<p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p> </div><!-- End demo-description --> </body> diff --git a/demos/autocomplete/remote-jsonp.html b/demos/autocomplete/remote-jsonp.html index ab8a600a8..986e9f0f0 100644 --- a/demos/autocomplete/remote-jsonp.html +++ b/demos/autocomplete/remote-jsonp.html @@ -1,24 +1,29 @@ <!DOCTYPE html> <html lang="en"> <head> - <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" /> - <script type="text/javascript"> + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - Remote JSONP datasource</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.menu.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> $(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", @@ -28,33 +33,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> @@ -73,13 +76,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> diff --git a/demos/autocomplete/remote-with-cache.html b/demos/autocomplete/remote-with-cache.html index a00c741e4..a6b02f255 100644 --- a/demos/autocomplete/remote-with-cache.html +++ b/demos/autocomplete/remote-with-cache.html @@ -1,47 +1,38 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Remote with caching 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" /> - <script type="text/javascript"> + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - Remote with caching</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.menu.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; } + </style> + <script> $(function() { - function log(message) { - $("<div/>").text(message).prependTo("#log"); - $("#log").attr("scrollTop", 0); - } - - var cache = {}; - $("#birds").autocomplete({ - source: function(request, response) { - if (cache.term == request.term && cache.content) { - response(cache.content); - return; - } - if (new RegExp(cache.term).test(request.term) && cache.content && cache.content.length < 13) { - response($.ui.autocomplete.filter(cache.content, request.term)); + var cache = {}, + lastXhr; + $( "#birds" ).autocomplete({ + minLength: 2, + source: function( request, response ) { + var term = request.term; + if ( term in cache ) { + response( cache[ term ] ); return; } - $.ajax({ - url: "search.php", - dataType: "json", - data: request, - success: function(data) { - cache.term = request.term; - cache.content = data; - response(data); + + lastXhr = $.getJSON( "search.php", request, function( data, status, xhr ) { + cache[ term ] = data; + if ( xhr === lastXhr ) { + response( data ); } }); - }, - minLength: 2, - select: function(event, ui) { - log(ui.item ? ("Selected: " + ui.item.value + " aka " + ui.item.id) : "Nothing selected, input was " + this.value); } }); }); @@ -56,20 +47,13 @@ <input id="birds" /> </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><!-- End demo --> + + <div class="demo-description"> -<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> -Similar to the remote datasource demo, though this adds some local caching to improve performance. The cache here saves just one query, and could be extended to cache multiple values, one for each term. -</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>Similar to the remote datasource demo, though this adds some local caching to improve performance. The cache here saves just one query, and could be extended to cache multiple values, one for each term.</p> </div><!-- End demo-description --> </body> diff --git a/demos/autocomplete/remote.html b/demos/autocomplete/remote.html index 9414102e6..c8ee849fe 100644 --- a/demos/autocomplete/remote.html +++ b/demos/autocomplete/remote.html @@ -1,27 +1,33 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Remote 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" /> - <script type="text/javascript"> + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - Remote datasource</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.menu.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; } + </style> + <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 ); } - - $("#birds").autocomplete({ + + $( "#birds" ).autocomplete({ source: "search.php", minLength: 2, - select: function(event, ui) { - log(ui.item ? ("Selected: " + ui.item.value + " aka " + ui.item.id) : "Nothing selected, input was " + this.value); + select: function( event, ui ) { + log( ui.item ? + "Selected: " + ui.item.value + " aka " + ui.item.id : + "Nothing selected, input was " + this.value ); } }); }); @@ -43,13 +49,11 @@ </div><!-- End demo --> + + <div class="demo-description"> -<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 JSON data, specified via a simple URL for the source-option. In addition, the minLength-option is set to 2 to avoid queries that would return too many results and the select-event is used to display some feedback. -</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 JSON data, specified via a simple URL for the source-option. In addition, the minLength-option is set to 2 to avoid queries that would return too many results and the select-event is used to display some feedback.</p> </div><!-- End demo-description --> </body> diff --git a/demos/autocomplete/search.php b/demos/autocomplete/search.php index 01206489a..8fa9d28f8 100644 --- a/demos/autocomplete/search.php +++ b/demos/autocomplete/search.php @@ -3,8 +3,8 @@ $q = strtolower($_GET["term"]); if (!$q) return; $items = array( -"Great <em>Bittern</em>"=>"Botaurus stellaris", -"Little <em>Grebe</em>"=>"Tachybaptus ruficollis", +"Great Bittern"=>"Botaurus stellaris", +"Little Grebe"=>"Tachybaptus ruficollis", "Black-necked Grebe"=>"Podiceps nigricollis", "Little Bittern"=>"Ixobrychus minutus", "Black-crowned Night Heron"=>"Nycticorax nycticorax", diff --git a/demos/autocomplete/xml.html b/demos/autocomplete/xml.html index 3a5dadab9..fff432e58 100644 --- a/demos/autocomplete/xml.html +++ b/demos/autocomplete/xml.html @@ -1,42 +1,48 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Remote 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" /> - <script type="text/javascript"> + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - XML data parsed once</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.menu.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; } + </style> + <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 ); } - + $.ajax({ url: "london.xml", dataType: "xml", - success: function(xmlResponse) { - var data = $("geoname", xmlResponse).map(function() { + success: function( xmlResponse ) { + var data = $( "geoname", xmlResponse ).map(function() { return { - value: $("name", this).text() + ", " + ($.trim($("countryName", this).text()) || "(unknown country)"), - id: $("geonameId", this).text() + value: $( "name", this ).text() + ", " + + ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ), + id: $( "geonameId", this ).text() }; }).get(); - $("#birds").autocomplete({ + $( "#birds" ).autocomplete({ source: data, minLength: 0, - select: function(event, ui) { - log(ui.item ? ("Selected: " + ui.item.value + ", geonameId: " + ui.item.id) : "Nothing selected, input was " + this.value); + select: function( event, ui ) { + log( ui.item ? + "Selected: " + ui.item.value + ", geonameId: " + ui.item.id : + "Nothing selected, input was " + this.value ); } }); } - }) - + }); }); </script> </head> @@ -56,13 +62,11 @@ </div><!-- End demo --> + + <div class="demo-description"> -<p> -This demo shows how to retrieve some XML data, parse it using jQuery's methods, then provide it to the autocomplete as the datasource. -</p> -<p> -This should also serve as a reference on how to parse a remote XML datasource - the parsing would just happen for each request within the source-callback. -</p> +<p>This demo shows how to retrieve some XML data, parse it using jQuery's methods, then provide it to the autocomplete as the datasource.</p> +<p>This should also serve as a reference on how to parse a remote XML datasource - the parsing would just happen for each request within the source-callback.</p> </div><!-- End demo-description --> </body> |
