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 - Custom data and display</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
	#project-label {
15
		display: block;
16
		font-weight: bold;
17
		margin-bottom: 1em;
18
	}
19
	#project-icon {
20
		float: left;
21
		height: 32px;
22
		width: 32px;
23
	}
24
	#project-description {
25
		margin: 0;
26
		padding: 0;
27
	}
28
	</style>
29
	<script>
30
	$(function() {
31
		var projects = [
32
			{
33
				value: "jquery",
34
				label: "jQuery",
35
				desc: "the write less, do more, JavaScript library",
36
				icon: "jquery_32x32.png"
37
			},
38
			{
39
				value: "jquery-ui",
40
				label: "jQuery UI",
41
				desc: "the official user interface library for jQuery",
42
				icon: "jqueryui_32x32.png"
43
			},
44
			{
45
				value: "sizzlejs",
46
				label: "Sizzle JS",
47
				desc: "a pure-JavaScript CSS selector engine",
48
				icon: "sizzlejs_32x32.png"
49
			}
50
		];
51
 
52
		$( "#project" ).autocomplete({
53
			minLength: 0,
54
			source: projects,
55
			focus: function( event, ui ) {
56
				$( "#project" ).val( ui.item.label );
57
				return false;
58
			},
59
			select: function( event, ui ) {
60
				$( "#project" ).val( ui.item.label );
61
				$( "#project-id" ).val( ui.item.value );
62
				$( "#project-description" ).html( ui.item.desc );
63
				$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
64
 
65
				return false;
66
			}
67
		})
68
		.data( "autocomplete" )._renderItem = function( ul, item ) {
69
			return $( "<li></li>" )
70
				.data( "item.autocomplete", item )
71
				.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
72
				.appendTo( ul );
73
		};
74
	});
75
	</script>
76
</head>
77
<body>
78
 
79
<div class="demo">
80
	<div id="project-label">Select a project (type "j" for a start):</div>
81
	<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default"/>
82
	<input id="project"/>
83
	<input type="hidden" id="project-id"/>
84
	<p id="project-description"></p>
85
</div><!-- End demo -->
86
 
87
 
88
 
89
<div class="demo-description">
90
<p>You can use your own custom data formats and displays by simply overriding the default focus and select actions.</p>
91
<p>Try typing "j" to get a list of projects or just press the down arrow.</p>
92
</div><!-- End demo-description -->
93
 
94
</body>
95
</html>