third-party/jquery-ui-1.10.2/demos/autocomplete/maxheight.html

   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.9.1.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.menu.js"></script>
  12         <script src="../../ui/jquery.ui.autocomplete.js"></script>
  13         <link rel="stylesheet" href="../demos.css">
  14         <style>
  15         .ui-autocomplete {
  16                 max-height: 100px;
  17                 overflow-y: auto;
  18                 /* prevent horizontal scrollbar */
  19                 overflow-x: hidden;
  20         }
  21         /* IE 6 doesn't support max-height
  22          * we use height instead, but this forces the menu to always be this tall
  23          */
  24         * html .ui-autocomplete {
  25                 height: 100px;
  26         }
  27         </style>
  28         <script>
  29         $(function() {
  30                 var availableTags = [
  31                         "ActionScript",
  32                         "AppleScript",
  33                         "Asp",
  34                         "BASIC",
  35                         "C",
  36                         "C++",
  37                         "Clojure",
  38                         "COBOL",
  39                         "ColdFusion",
  40                         "Erlang",
  41                         "Fortran",
  42                         "Groovy",
  43                         "Haskell",
  44                         "Java",
  45                         "JavaScript",
  46                         "Lisp",
  47                         "Perl",
  48                         "PHP",
  49                         "Python",
  50                         "Ruby",
  51                         "Scala",
  52                         "Scheme"
  53                 ];
  54                 $( "#tags" ).autocomplete({
  55                         source: availableTags
  56                 });
  57         });
  58         </script>
  59 </head>
  60 <body>
  61
  62 <div class="ui-widget">
  63         <label for="tags">Tags: </label>
  64         <input id="tags">
  65 </div>
  66
  67 <div class="demo-description">
  68 <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>
  69 </div>
  70 </body>
  71 </html>