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.
web/static/css/jq-css/demos/autocomplete/xml.html
author ymh <ymh.work@gmail.com>
Sat, 12 Jun 2010 00:33:37 +0200
changeset 30 81d408373dde
permissions -rw-r--r--
itry to have the player in the preview page
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
30
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     1
 
<!DOCTYPE html>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     2
 
<html lang="en">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     3
 
<head>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     4
 
	<meta charset="UTF-8" />
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     5
 
	<title>jQuery UI Autocomplete Remote datasource demo</title>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     6
 
	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     7
 
	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     8
 
	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     9
 
	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    10
 
	<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    11
 
	<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    12
 
	<link type="text/css" href="../demos.css" rel="stylesheet" />
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    13
 
	<script type="text/javascript">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    14
 
	$(function() {
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    15
 
		function log(message) {
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    16
 
			$("<div/>").text(message).prependTo("#log");
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    17
 
			$("#log").attr("scrollTop", 0);
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    18
 
		}
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    19
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    20
 
		$.ajax({
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    21
 
			url: "london.xml",
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    22
 
			dataType: "xml",
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    23
 
			success: function(xmlResponse) {
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    24
 
				var data = $("geoname", xmlResponse).map(function() {
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    25
 
					return {
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    26
 
						value: $("name", this).text() + ", " + ($.trim($("countryName", this).text()) || "(unknown country)"),
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    27
 
						id: $("geonameId", this).text()
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    28
 
					};
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    29
 
				}).get();
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    30
 
				$("#birds").autocomplete({
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    31
 
					source: data,
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    32
 
					minLength: 0,
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    33
 
					select: function(event, ui) {
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    34
 
						log(ui.item ? ("Selected: " + ui.item.value + ", geonameId: " + ui.item.id) : "Nothing selected, input was " + this.value);
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    35
 
					}
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    36
 
				});
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    37
 
			}
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    38
 
		})
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    39
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    40
 
	});
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    41
 
	</script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    42
 
</head>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    43
 
<body>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    44
 












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    45


<div class="demo">












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    46














81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    47


<div class="ui-widget">












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    48


	<label for="birds">London matches: </label>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    49


	<input id="birds" />












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    50


</div>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    51














81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    52


<div class="ui-widget" style="margin-top:2em; font-family:Arial">












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    53


	Result:












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    54


	<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    55


</div>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    56














81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    57


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












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    58














81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    59


<div class="demo-description">












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    60


<p>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    61


This demo shows how to retrieve some XML data, parse it using jQuery's methods, then provide it to the autocomplete as the datasource.












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    62


</p>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    63


<p>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    64


This should also serve as a reference on how to parse a remote XML datasource - the parsing would just happen for each request within the source-callback.












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    65


</p>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    66


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












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    67














81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    68


</body>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    69


</html>














eulalie