annotate jquery-ui/development-bundle/demos/autocomplete/maxheight.html @ 0:b2e4605f20b2

beta version
author dwinter
date Thu, 30 Jun 2011 09:07:49 +0200
parents
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
0
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
1 <!DOCTYPE html>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
2 <html lang="en">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
3 <head>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
4 <meta charset="utf-8">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
5 <title>jQuery UI Autocomplete - Scrollable results</title>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
6 <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
7 <script src="../../jquery-1.5.1.js"></script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
8 <script src="../../ui/jquery.ui.core.js"></script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
9 <script src="../../ui/jquery.ui.widget.js"></script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
10 <script src="../../ui/jquery.ui.position.js"></script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
11 <script src="../../ui/jquery.ui.autocomplete.js"></script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
12 <link rel="stylesheet" href="../demos.css">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
13 <style>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
14 .ui-autocomplete {
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
15 max-height: 100px;
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
16 overflow-y: auto;
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
17 /* prevent horizontal scrollbar */
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
18 overflow-x: hidden;
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
19 /* add padding to account for vertical scrollbar */
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
20 padding-right: 20px;
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
21 }
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
22 /* IE 6 doesn't support max-height
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
23 * we use height instead, but this forces the menu to always be this tall
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
24 */
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
25 * html .ui-autocomplete {
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
26 height: 100px;
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
27 }
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
28 </style>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
29 <script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
30 $(function() {
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
31 var availableTags = [
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
32 "ActionScript",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
33 "AppleScript",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
34 "Asp",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
35 "BASIC",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
36 "C",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
37 "C++",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
38 "Clojure",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
39 "COBOL",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
40 "ColdFusion",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
41 "Erlang",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
42 "Fortran",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
43 "Groovy",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
44 "Haskell",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
45 "Java",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
46 "JavaScript",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
47 "Lisp",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
48 "Perl",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
49 "PHP",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
50 "Python",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
51 "Ruby",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
52 "Scala",
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
53 "Scheme"
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
54 ];
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
55 $( "#tags" ).autocomplete({
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
56 source: availableTags
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
57 });
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
58 });
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
59 </script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
60 </head>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
61 <body>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
62
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
63 <div class="demo">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
64
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
65 <div class="ui-widget">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
66 <label for="tags">Tags: </label>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
67 <input id="tags" />
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
68 </div>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
69
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
70 </div><!-- End demo -->
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
71
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
72
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
73
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
74 <div class="demo-description">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
75 <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>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
76 </div><!-- End demo-description -->
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
77
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
78 </body>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
79 </html>