summaryrefslogtreecommitdiffstats
path: root/apps/it/static/js/ui/demos/autocomplete/maxheight.html
diff options
context:
space:
mode:
Diffstat (limited to 'apps/it/static/js/ui/demos/autocomplete/maxheight.html')
-rw-r--r--apps/it/static/js/ui/demos/autocomplete/maxheight.html71
1 files changed, 71 insertions, 0 deletions
diff --git a/apps/it/static/js/ui/demos/autocomplete/maxheight.html b/apps/it/static/js/ui/demos/autocomplete/maxheight.html
new file mode 100644
index 0000000..570bc7e
--- /dev/null
+++ b/apps/it/static/js/ui/demos/autocomplete/maxheight.html
@@ -0,0 +1,71 @@
+<!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.10.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.menu.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;
+ }
+ /* 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="ui-widget">
+ <label for="tags">Tags: </label>
+ <input id="tags">
+</div>
+
+<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>
+</body>
+</html>