recherche intelligente de gens
[auf_rh_dae.git] / project / media / jquery-autocomplete / demo / index.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4
5 <title>jQuery Autocomplete Plugin</title>
6 <script type="text/javascript" src="../lib/jquery.js"></script>
7 <script type='text/javascript' src='../lib/jquery.bgiframe.min.js'></script>
8 <script type='text/javascript' src='../lib/jquery.ajaxQueue.js'></script>
9 <script type='text/javascript' src='../lib/thickbox-compressed.js'></script>
10 <script type='text/javascript' src='../jquery.autocomplete.js'></script>
11 <script type='text/javascript' src='localdata.js'></script>
12 <link rel="stylesheet" type="text/css" href="main.css" />
13 <link rel="stylesheet" type="text/css" href="../jquery.autocomplete.css" />
14 <link rel="stylesheet" type="text/css" href="../lib/thickbox.css" />
15
16 <script type="text/javascript">
17 $().ready(function() {
18
19 function log(event, data, formatted) {
20 $("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
21 }
22
23 function formatItem(row) {
24 return row[0] + " (<strong>id: " + row[1] + "</strong>)";
25 }
26 function formatResult(row) {
27 return row[0].replace(/(<.+?>)/gi, '');
28 }
29
30 $("#suggest1").focus().autocomplete(cities);
31 $("#month").autocomplete(months, {
32 minChars: 0,
33 max: 12,
34 autoFill: true,
35 mustMatch: true,
36 matchContains: false,
37 scrollHeight: 220,
38 formatItem: function(data, i, total) {
39 // don't show the current month in the list of values (for whatever reason)
40 if ( data[0] == months[new Date().getMonth()] )
41 return false;
42 return data[0];
43 }
44 });
45 $("#suggest13").autocomplete(emails, {
46 minChars: 0,
47 width: 310,
48 matchContains: "word",
49 autoFill: false,
50 formatItem: function(row, i, max) {
51 return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
52 },
53 formatMatch: function(row, i, max) {
54 return row.name + " " + row.to;
55 },
56 formatResult: function(row) {
57 return row.to;
58 }
59 });
60 $("#singleBirdRemote").autocomplete("search.php", {
61 width: 260,
62 selectFirst: false
63 });
64 $("#suggest14").autocomplete(cities, {
65 matchContains: true,
66 minChars: 0
67 });
68 $("#suggest3").autocomplete(cities, {
69 multiple: true,
70 mustMatch: true,
71 autoFill: true
72 });
73 $("#suggest4").autocomplete('search.php', {
74 width: 300,
75 multiple: true,
76 matchContains: true,
77 formatItem: formatItem,
78 formatResult: formatResult
79 });
80 $("#imageSearch").autocomplete("images.php", {
81 width: 320,
82 max: 4,
83 highlight: false,
84 scroll: true,
85 scrollHeight: 300,
86 formatItem: function(data, i, n, value) {
87 return "<img src='images/" + value + "'/> " + value.split(".")[0];
88 },
89 formatResult: function(data, value) {
90 return value.split(".")[0];
91 }
92 });
93 $("#tags").autocomplete(["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl"], {
94 width: 320,
95 max: 4,
96 highlight: false,
97 multiple: true,
98 multipleSeparator: " ",
99 scroll: true,
100 scrollHeight: 300
101 });
102
103
104 $(":text, textarea").result(log).next().click(function() {
105 $(this).prev().search();
106 });
107 $("#singleBirdRemote").result(function(event, data, formatted) {
108 if (data)
109 $(this).parent().next().find("input").val(data[1]);
110 });
111 $("#suggest4").result(function(event, data, formatted) {
112 var hidden = $(this).parent().next().find(">:input");
113 hidden.val( (hidden.val() ? hidden.val() + ";" : hidden.val()) + data[1]);
114 });
115 $("#suggest15").autocomplete(cities, { scroll: true } );
116 $("#scrollChange").click(changeScrollHeight);
117
118 $("#thickboxEmail").autocomplete(emails, {
119 minChars: 0,
120 width: 310,
121 matchContains: true,
122 highlightItem: false,
123 formatItem: function(row, i, max, term) {
124 return row.name.replace(new RegExp("(" + term + ")", "gi"), "<strong>$1</strong>") + "<br><span style='font-size: 80%;'>Email: &lt;" + row.to + "&gt;</span>";
125 },
126 formatResult: function(row) {
127 return row.to;
128 }
129 });
130
131 $("#clear").click(function() {
132 $(":input").unautocomplete();
133 });
134 });
135
136 function changeOptions(){
137 var max = parseInt(window.prompt('Please type number of items to display:', jQuery.Autocompleter.defaults.max));
138 if (max > 0) {
139 $("#suggest1").setOptions({
140 max: max
141 });
142 }
143 }
144
145 function changeScrollHeight() {
146 var h = parseInt(window.prompt('Please type new scroll height (number in pixels):', jQuery.Autocompleter.defaults.scrollHeight));
147 if(h > 0) {
148 $("#suggest1").setOptions({
149 scrollHeight: h
150 });
151 }
152 }
153
154 function changeToMonths(){
155 $("#suggest1")
156 // clear existing data
157 .val("")
158 // change the local data to months
159 .setOptions({data: months})
160 // get the label tag
161 .prev()
162 // update the label tag
163 .text("Month (local):");
164 }
165 </script>
166
167 </head>
168
169 <body>
170
171 <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/">jQuery Autocomplete Plugin</a> Demo</h1>
172
173 <div id="content">
174
175 <form autocomplete="off">
176 <p>
177 <label>Single City (local):</label>
178 <input type="text" id="suggest1" />
179 <input type="button" value="Get Value" />
180 <input type="button" value="Change Max Items" onclick="changeOptions();" />
181 <input type="button" value="Change to Month Data" onclick="changeToMonths();" />
182 <input type="button" value="Change scroll height" id="scrollChange" />
183 </p>
184 <p>
185 <label>Month (local):</label>
186 <input type="text" id="month" />
187 <input type="button" value="Get Value" />
188 (Current month is excluded from list)
189 </p>
190 <p>
191 <label>E-Mail (local):</label>
192 <input type="text" id="suggest13" />
193 <input type="button" value="Get Value" />
194 </p>
195 <p>
196 <label>Single Bird (remote):</label>
197 <input type="text" id="singleBirdRemote" />
198 <input type="button" value="Get Value" />
199 </p>
200 <p>
201 <label>Hidden input</label>
202 <input />
203 </p>
204 <p>
205 <label>Single City (contains):</label>
206 <input type="text" id="suggest14" />
207 <input type="button" value="Get Value" />
208 </p>
209 <p>
210 <label>Multiple Cities (local):</label>
211 <textarea id='suggest3' cols='40' rows='3'></textarea>
212 <input type="button" value="Get Value" />
213 </p>
214 <p>
215 <label>Multiple Birds (remote):</label>
216 <textarea id='suggest4'></textarea>
217 <input type="button" value="Get Value" />
218 </p>
219 <p>
220 <label>Hidden input</label>
221 <textarea></textarea>
222 </p>
223 <p>
224 <label>Image search (remote):</label>
225 <input type="text" id='imageSearch' />
226 <input type="button" value="Get Value" />
227 </p>
228 <p>
229 <label>Tags (local):</label>
230 <input type="text" id='tags' />
231 <input type="button" value="Get Value" />
232 </p>
233 <p>
234 <label>Some dropdown (&lt;3 IE):</label>
235 <select>
236 <option value="">Item 12334455</option>
237 <option value="2">Item 2</option>
238 <option value="3">Item 3</option>
239 <option value="4">Item 4</option>
240 </select>
241 </p>
242
243 <input type="submit" value="Submit" />
244 </form>
245
246 <p>
247 <a href="#TB_inline?height=155&width=400&inlineId=modalWindow" class="thickbox">Click here for an autocomplete inside a thickbox window.</a> (this should work even if it is beyond the fold)
248 </p>
249
250 <div id="modalWindow" style="display: none;">
251 <p>
252 <label>E-Mail (local):</label>
253 <input type="text" id="thickboxEmail" />
254 <input type="button" value="Get Value" />
255 </p>
256 </div>
257
258 <button id="clear">Remove all autocompletes</button>
259
260 <a href="search.phps">PHP script used to for remote autocomplete</a>
261
262 <h3>Result:</h3> <ol id="result"></ol>
263
264 </div>
265 <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
266 </script>
267 <script type="text/javascript">
268 _uacct = "UA-2623402-1";
269 urchinTracker();
270 </script>
271 </body>
272 </html>