Mercurial Mercurial > eulalie / annotate
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client/player/css/jq-css/demos/autocomplete/remote-jsonp.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 JSONP datasource 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
 
		$("#city").autocomplete({
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    21
 
			source: function(request, response) {
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    22
 
				$.ajax({
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    23
 
					url: "http://ws.geonames.org/searchJSON",
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    24
 
					dataType: "jsonp",
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    25
 
					data: {
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    26
 
						featureClass: "P",
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    27
 
						style: "full",
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    28
 
						maxRows: 12,
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    29
 
						name_startsWith: request.term
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
 
					success: function(data) {
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    32
 
						response($.map(data.geonames, function(item) {
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    33
 
							return {
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    34
 
								label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    35
 
								value: item.name
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    36
 
							}
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    37
 
						}))
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    38
 
					}
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
 
			minLength: 2,
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    42
 
			select: function(event, ui) {
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    43
 
				log(ui.item ? ("Selected: " + ui.item.label) : "Nothing selected, input was " + this.value);
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    44
 
			},
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    45
 
			open: function() {
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    46
 
				$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
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
 
			close: function() {
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    49
 
				$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    50
 
			}
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
 
	});
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    53
 
	</script>
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    54
 
	<style>
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    55
 
		.ui-autocomplete-loading { background: url(indicator.gif) no-repeat right; }
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    56
 
		#city { width: 25em; }
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    57
 
	</style>
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    58
 
</head>
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    59
 
<body>
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    60
 












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    61


<div class="demo">












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    62














2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    63


<div class="ui-widget">












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    64


	<label for="city">Your city: </label>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    65


	<input id="city" />












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    66


	Powered by <a href="http://geonames.org">geonames.org</a>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    67


</div>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    68














2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    69


<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




    70


	Result:












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    71


	<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




    72


</div>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    73














2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    74


</div><!-- End demo -->












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    75














2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    76


<div class="demo-description">












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    77


<p>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    78


The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, 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




    79


</p>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    80


<p>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    81


In this case, the datasource is the <a href="http://geonames.org">geonames.org webservice</a>. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input. 












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    82


</p>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    83


</div><!-- End demo-description -->












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    84














2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    85


</body>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    86


</html>














eulalie