jquery / jquery-ui

Source
Commits
Network (42)
Graphs
Tree: 5c55462

The official jQuery user interface library. — Read more

This URL has Read+Write access

Autocomplete: multiple demo added

jzaefferer (author)

Thu Apr 15 01:43:47 -0700 2010

commit 5c55462a9024351f3c6084ea2ec862a19cba5b67
tree bbd37ee06abcf5b944fedb3cb5be25a030495477
parent baa3678477027de9191468fd6af1d3568d7597b5

M	demos/autocomplete/index.html	1 •
A	demos/autocomplete/multiple.html	75 •••••

demos/autocomplete/index.html

View file @ 5c55462

@@ -17,6 +17,7 @@
       <li><a href="custom-data.html">Custom data and display</a></li>
       <li><a href="xml.html">XML data parsed once</a></li>
       <li><a href="categories.html">Categories</a></li>
+      <li><a href="multiple.html">Multiple values</a></li>
     </ul>
   </div>
 </body>

demos/autocomplete/multiple.html

View file @ 5c55462

...	...	@@ -0,0 +1,75 @@
	1	+<!DOCTYPE html>
	2	+<html lang="en">
	3	+<head>
	4	+ <meta charset="UTF-8" />
	5	+ <title>jQuery UI Autocomplete multiple demo</title>
	6	+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
	7	+ <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
	8	+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
	9	+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
	10	+ <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
	11	+ <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
	12	+ <link type="text/css" href="../demos.css" rel="stylesheet" />
	13	+ <script type="text/javascript">
	14	+ $(function() {
	15	+ function split(val) {
	16	+ return val.split(/,\s*/);
	17	+ }
	18	+ function extractLast(term) {
	19	+ return split(term)[split(term).length - 1];
	20	+ }
	21	+
	22	+ $("#birds").autocomplete({
	23	+ source: function(request, response) {
	24	+ $.getJSON("search.php", {
	25	+ term: extractLast(request.term)
	26	+ }, response);
	27	+ },
	28	+ search: function() {
	29	+ // custom minLength
	30	+ var term = extractLast($(this).val());
	31	+ if (term.length < 2) {
	32	+ return false;
	33	+ }
	34	+ },
	35	+ focus: function() {
	36	+ // prevent value inserted on focus
	37	+ return false;
	38	+ },
	39	+ select: function(event, ui) {
	40	+ var terms = split( $(this).val() );
	41	+ // remove the current input
	42	+ terms.pop();
	43	+ // add the selected item
	44	+ terms.push( ui.item.value );
	45	+ // add placeholder to get the comma-and-space at the end
	46	+ terms.push("");
	47	+ $(this).val( terms.join(", ") );
	48	+ return false;
	49	+ }
	50	+ });
	51	+ });
	52	+ </script>
	53	+</head>
	54	+<body>
	55	+
	56	+<div class="demo">
	57	+
	58	+<div class="ui-widget">
	59	+ <label for="birds">Birds: </label>
	60	+ <input id="birds" size="50" />
	61	+</div>
	62	+
	63	+</div><!-- End demo -->
	64	+
	65	+<div class="demo-description">
	66	+<p>
	67	+Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names.
	68	+</p>
	69	+<p>
	70	+This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.
	71	+</p>
	72	+</div><!-- End demo-description -->
	73	+
	74	+</body>
	75	+</html>

0 notes on commit `5c55462` Show line notes below

Please log in to comment.

...	...	@@ -17,6 +17,7 @@
17	17	<li><a href="custom-data.html">Custom data and display</a></li>
18	18	<li><a href="xml.html">XML data parsed once</a></li>
19	19	<li><a href="categories.html">Categories</a></li>
	20	+ <li><a href="multiple.html">Multiple values</a></li>
20	21	</ul>
21	22	</div>
22	23	</body>

jquery / jquery-ui

0 notes on commit 5c55462 Show line notes below

0 notes on commit `5c55462` Show line notes below