author | ymh <ymh.work@gmail.com> |
Mon, 12 Jul 2010 12:01:22 +0200 | |
changeset 57 | 3a3c15c462f8 |
parent 1 | 436d4791d7ac |
parent 51 | 2d6866072851 |
permissions | -rw-r--r-- |
51
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
1 |
<!DOCTYPE html> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
2 |
<html lang="en"> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
3 |
<head> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
4 |
<meta charset="UTF-8" /> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
5 |
<title>jQuery UI Autocomplete Remote with caching demo</title> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
6 |
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
7 |
<script type="text/javascript" src="../../jquery-1.4.2.js"></script> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
8 |
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
9 |
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
10 |
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
11 |
<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
12 |
<link type="text/css" href="../demos.css" rel="stylesheet" /> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
13 |
<script type="text/javascript"> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
14 |
$(function() { |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
15 |
function log(message) { |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
16 |
$("<div/>").text(message).prependTo("#log"); |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
17 |
$("#log").attr("scrollTop", 0); |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
18 |
} |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
19 |
|
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
20 |
var cache = {}; |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
21 |
$("#birds").autocomplete({ |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
22 |
source: function(request, response) { |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
23 |
if (cache.term == request.term && cache.content) { |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
24 |
response(cache.content); |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
25 |
return; |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
26 |
} |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
27 |
if (new RegExp(cache.term).test(request.term) && cache.content && cache.content.length < 13) { |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
28 |
response($.ui.autocomplete.filter(cache.content, request.term)); |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
29 |
return; |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
30 |
} |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
31 |
$.ajax({ |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
32 |
url: "search.php", |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
33 |
dataType: "json", |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
34 |
data: request, |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
35 |
success: function(data) { |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
36 |
cache.term = request.term; |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
37 |
cache.content = data; |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
38 |
response(data); |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
39 |
} |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
40 |
}); |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
41 |
}, |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
42 |
minLength: 2, |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
43 |
select: function(event, ui) { |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
44 |
log(ui.item ? ("Selected: " + ui.item.value + " aka " + ui.item.id) : "Nothing selected, input was " + this.value); |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
45 |
} |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
46 |
}); |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
47 |
}); |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
48 |
</script> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
49 |
</head> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
50 |
<body> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
51 |
|
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
52 |
<div class="demo"> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
53 |
|
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
54 |
<div class="ui-widget"> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
55 |
<label for="birds">Birds: </label> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
56 |
<input id="birds" /> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
57 |
</div> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
58 |
|
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
59 |
<div class="ui-widget" style="margin-top:2em; font-family:Arial"> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
60 |
Result: |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
61 |
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
62 |
</div> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
63 |
|
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
64 |
</div><!-- End demo --> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
65 |
|
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
66 |
<div class="demo-description"> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
67 |
<p> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
68 |
The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field. |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
69 |
</p> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
70 |
<p> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
71 |
Similar to the remote datasource demo, though this adds some local caching to improve performance. The cache here saves just one query, and could be extended to cache multiple values, one for each term. |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
72 |
</p> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
73 |
</div><!-- End demo-description --> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
74 |
|
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
75 |
</body> |
2d6866072851
fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff
changeset
|
76 |
</html> |