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 - Categories</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-category {
15
		font-weight: bold;
16
		padding: .2em .4em;
17
		margin: .8em 0 .2em;
18
		line-height: 1.5;
19
	}
20
	</style>
21
	<script>
22
	$.widget( "custom.catcomplete", $.ui.autocomplete, {
23
		_renderMenu: function( ul, items ) {
24
			var self = this,
25
				currentCategory = "";
26
			$.each( items, function( index, item ) {
27
				if ( item.category != currentCategory ) {
28
					ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
29
					currentCategory = item.category;
30
				}
31
				self._renderItem( ul, item );
32
			});
33
		}
34
	});
35
	</script>
36
	<script>
37
	$(function() {
38
		var data = [
39
			{ label: "anders", category: "" },
40
			{ label: "andreas", category: "" },
41
			{ label: "antal", category: "" },
42
			{ label: "annhhx10", category: "Products" },
43
			{ label: "annk K12", category: "Products" },
44
			{ label: "annttop C13", category: "Products" },
45
			{ label: "anders andersson", category: "People" },
46
			{ label: "andreas andersson", category: "People" },
47
			{ label: "andreas johnson", category: "People" }
48
		];
49
 
50
		$( "#search" ).catcomplete({
51
			delay: 0,
52
			source: data
53
		});
54
	});
55
	</script>
56
</head>
57
<body>
58
 
59
<div class="demo">
60
	<label for="search">Search: </label>
61
	<input id="search" />
62
</div><!-- End demo -->
63
 
64
 
65
 
66
<div class="demo-description">
67
<p>A categorized search result. Try typing "a" or "n".</p>
68
</div><!-- End demo-description -->
69
 
70
</body>
71
</html>