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 - Multiple values</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 
	<script>
14 
	$(function() {
15 
		var availableTags = [
16 
			"ActionScript",
17 
			"AppleScript",
18 
			"Asp",
19 
			"BASIC",
20 
			"C",
21 
			"C++",
22 
			"Clojure",
23 
			"COBOL",
24 
			"ColdFusion",
25 
			"Erlang",
26 
			"Fortran",
27 
			"Groovy",
28 
			"Haskell",
29 
			"Java",
30 
			"JavaScript",
31 
			"Lisp",
32 
			"Perl",
33 
			"PHP",
34 
			"Python",
35 
			"Ruby",
36 
			"Scala",
37 
			"Scheme"
38 
		];
39 
		function split( val ) {
40 
			return val.split( /,\s*/ );
41 
		}
42 
		function extractLast( term ) {
43 
			return split( term ).pop();
44 
		}
45 
 
46 
		$( "#tags" ).autocomplete({
47 
			minLength: 0,
48 
			source: function( request, response ) {
49 
				// delegate back to autocomplete, but extract the last term
50 
				response( $.ui.autocomplete.filter(
51 
					availableTags, extractLast( request.term ) ) );
52 
			},
53 
			focus: function() {
54 
				// prevent value inserted on focus
55 
				return false;
56 
			},
57 
			select: function( event, ui ) {
58 
				var terms = split( this.value );
59 
				// remove the current input
60 
				terms.pop();
61 
				// add the selected item
62 
				terms.push( ui.item.value );
63 
				// add placeholder to get the comma-and-space at the end
64 
				terms.push( "" );
65 
				this.value = terms.join( ", " );
66 
				return false;
67 
			}
68 
		});
69 
	});
70 
	</script>
71 
</head>
72 
<body>
73 
 
74 
<div class="demo">
75 
 
76 
<div class="ui-widget">
77 
	<label for="tags">Tag programming languages: </label>
78 
	<input id="tags" size="50" />
79 
</div>
80 
 
81 
</div><!-- End demo -->
82 
 
83 
 
84 
 
85 
<div class="demo-description">
86 
<p>Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.</p>
87 
<p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p>
88 
</div><!-- End demo-description -->
89 
 
90 
</body>
91 
</html>