source: ether_statistics/web/resources/js/jquery-ui-1.8.16.custom/development-bundle/demos/autocomplete/maxheight.html @ 683

Last change on this file since 683 was 681, checked in by *, 12 years ago

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