Subversion Repositories Sites.obs-saisons.fr

Rev

Details | Last modification | View Log | RSS feed

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