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/combobox.html
author samuel huron <admin@cybunk.com>
Thu, 17 Jun 2010 11:16:34 +0200
changeset 51 2d6866072851
child 57 3a3c15c462f8
permissions -rw-r--r--
fichiers oublier dans le dernier commit
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 Combobox 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.button.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.position.js"></script>
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    12
 
	<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 
    13
 
	<link type="text/css" href="../demos.css" rel="stylesheet" />
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    14
 
	<style type="text/css">
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    15
 
		/* TODO shouldn't be necessary */
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    16
 
		.ui-button { margin-left: -1px; }
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    17
 
		.ui-button-icon-only .ui-button-text { padding: 0.35em; }
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    18
 
		.ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    19
 
	</style>
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    20
 
	<script type="text/javascript">
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    21
 
	(function($) {
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    22
 
		$.widget("ui.combobox", {
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    23
 
			_create: function() {
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    24
 
				var self = this;
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    25
 
				var select = this.element.hide();
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    26
 
				var input = $("<input>")
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    27
 
					.insertAfter(select)
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    28
 
					.autocomplete({
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    29
 
						source: function(request, response) {
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    30
 
							var matcher = new RegExp(request.term, "i");
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    31
 
							response(select.children("option").map(function() {
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    32
 
								var text = $(this).text();
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    33
 
								if (this.value && (!request.term || matcher.test(text)))
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    34
 
									return {
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    35
 
										id: this.value,
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    36
 
										label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    37
 
										value: text
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
 
						delay: 0,
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    42
 
						change: function(event, ui) {
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    43
 
							if (!ui.item) {
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    44
 
								// remove invalid value, as it didn't match anything
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    45
 
								$(this).val("");
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    46
 
								return false;
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
 
							select.val(ui.item.id);
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    49
 
							self._trigger("selected", event, {
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    50
 
								item: select.find("[value='" + ui.item.id + "']")
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
 
						},
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    54
 
						minLength: 0
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    55
 
					})
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    56
 
					.addClass("ui-widget ui-widget-content ui-corner-left");
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    57
 
				$("<button>&nbsp;</button>")
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    58
 
				.attr("tabIndex", -1)
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    59
 
				.attr("title", "Show All Items")
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    60
 
				.insertAfter(input)
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    61
 
				.button({
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    62
 
					icons: {
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    63
 
						primary: "ui-icon-triangle-1-s"
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    64
 
					},
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    65
 
					text: false
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    66
 
				}).removeClass("ui-corner-all")
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    67
 
				.addClass("ui-corner-right ui-button-icon")
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    68
 
				.click(function() {
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    69
 
					// close if already visible
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    70
 
					if (input.autocomplete("widget").is(":visible")) {
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    71
 
						input.autocomplete("close");
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    72
 
						return;
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
 
					// pass empty string as value to search for, displaying all results
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    75
 
					input.autocomplete("search", "");
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    76
 
					input.focus();
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    77
 
				});
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    78
 
			}
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    79
 
		});
2d6866072851 fichiers oublier dans le dernier commit
samuel huron <admin@cybunk.com>
parents:
diff changeset 
    80
 












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    81


	})(jQuery);












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    82


		












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    83


	$(function() {












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    84


		$("#combobox").combobox();












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    85


		$("#toggle").click(function() {












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    86


			$("#combobox").toggle();












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    87


		});












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    88


	});












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    89


	</script>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    90


</head>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    91


<body>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    92


	












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    93


<div class="demo">












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    94














2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    95


<div class="ui-widget">












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    96


	<label>Your preferred programming language: </label>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    97


	<select id="combobox">












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    98


		<option value="">Select one...</option>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




    99


		<option value="a">asp</option>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   100


        <option value="c">c</option>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   101


        <option value="cpp">c++</option>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   102


        <option value="cf">coldfusion</option>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   103


        <option value="g">groovy</option>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   104


        <option value="h">haskell</option>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   105


        <option value="j">java</option>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   106


        <option value="js">javascript</option>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   107


        <option value="p1">perl</option>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   108


        <option value="p2">php</option>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   109


        <option value="p3">python</option>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   110


        <option value="r">ruby</option>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   111


        <option value="s">scala</option>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   112


	</select>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   113


</div>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   114


<button id="toggle">Show underlying select</button>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   115














2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   116


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












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   117














2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   118


<div class="demo-description">












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   119


<p>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   120


A custom widget built by composition of Autocomplete and Button. You can either type something into the field to get filtered suggestions based on your input, or use the button to get the full list of selections.












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   121


</p>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   122


<p>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   123


The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option.












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   124


</p>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   125


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












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   126














2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   127


</body>












2d6866072851
fichiers oublier dans le dernier commit



samuel huron <admin@cybunk.com>


parents: 

diff
changeset




   128


</html>














eulalie