diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2010-07-19 14:17:44 -0400 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2010-07-19 14:17:44 -0400 |
| commit | 5e3755af8aa17b2bf742761b6ca40acccb248a04 (patch) | |
| tree | 9cee30b753a0c08f9954596d7fd1dcf9273b239c | |
| parent | 44daca1cfab3514ae039f816445cfde9e503b7f7 (diff) | |
| download | jquery-ui-5e3755af8aa17b2bf742761b6ca40acccb248a04.tar.gz jquery-ui-5e3755af8aa17b2bf742761b6ca40acccb248a04.zip | |
Autocomplete: Added demo of scrollable results. Fixes #5815 - Autocomplete: document and demo a scrolling menu.
| -rw-r--r-- | demos/autocomplete/index.html | 1 | ||||
| -rw-r--r-- | demos/autocomplete/maxheight.html | 52 |
2 files changed, 53 insertions, 0 deletions
diff --git a/demos/autocomplete/index.html b/demos/autocomplete/index.html index ba96d994e..c866ba199 100644 --- a/demos/autocomplete/index.html +++ b/demos/autocomplete/index.html @@ -13,6 +13,7 @@ <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 (max-height)</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> diff --git a/demos/autocomplete/maxheight.html b/demos/autocomplete/maxheight.html new file mode 100644 index 000000000..97de724ba --- /dev/null +++ b/demos/autocomplete/maxheight.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Autocomplete Scrollable Results 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"> + .ui-autocomplete { + max-height: 100px; + overflow-y: auto; + } + /* 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 type="text/javascript"> + $(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> |