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/remote.html
author veltr
Thu, 19 Jul 2012 17:30:02 +0200
changeset 82 f00eb382bff1
parent 30 81d408373dde
permissions -rw-r--r--
Bugfixes
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
 
		$("#birds").autocomplete({
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    21
 
			source: "search.php",
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    22
 
			minLength: 2,
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    23
 
			select: function(event, ui) {
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    24
 
				log(ui.item ? ("Selected: " + ui.item.value + " aka " + 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 
    25
 
			}
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    26
 
		});
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    27
 
	});
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    28
 
	</script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    29
 
</head>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    30
 
<body>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    31
 












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    32


<div class="demo">












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    33














81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    34


<div class="ui-widget">












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    35


	<label for="birds">Birds: </label>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    36


	<input id="birds" />












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    37


</div>












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


<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




    40


	Result:












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    41


	<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




    42


</div>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    43














81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    44


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












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    45














81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    46


<div class="demo-description">












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    47


<p>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    48


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.












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    49


</p>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    50


<p>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    51


The datasource is a server-side script which returns JSON data, specified via a simple URL for the source-option. In addition, the minLength-option is set to 2 to avoid queries that would return too many results and the select-event is used to display some feedback.












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    52


</p>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    53


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












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    54














81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    55


</body>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    56


</html>














eulalie