client/player/css/jq-css/demos/autocomplete/remote-with-cache.html
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--
Merge with da0957782d03935d99e10137f123191a9c843391
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
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>