| New file |
|---|
| 0,0 → 1,75 |
|---|
| <!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.4.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.autocomplete.js"></script> |
| <link rel="stylesheet" href="../demos.css"> |
| <style> |
| .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> |
| $(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> |