diff options
| author | jzaefferer <joern.zaefferer@gmail.com> | 2010-04-15 10:43:47 +0200 |
|---|---|---|
| committer | jzaefferer <joern.zaefferer@gmail.com> | 2010-04-15 10:43:47 +0200 |
| commit | 5c55462a9024351f3c6084ea2ec862a19cba5b67 (patch) | |
| tree | bbd37ee06abcf5b944fedb3cb5be25a030495477 /demos/autocomplete | |
| parent | baa3678477027de9191468fd6af1d3568d7597b5 (diff) | |
| download | jquery-ui-5c55462a9024351f3c6084ea2ec862a19cba5b67.tar.gz jquery-ui-5c55462a9024351f3c6084ea2ec862a19cba5b67.zip | |
Autocomplete: multiple demo added
Diffstat (limited to 'demos/autocomplete')
| -rw-r--r-- | demos/autocomplete/index.html | 1 | ||||
| -rw-r--r-- | demos/autocomplete/multiple.html | 75 |
2 files changed, 76 insertions, 0 deletions
diff --git a/demos/autocomplete/index.html b/demos/autocomplete/index.html index 42f13dc4b..0c92d19b4 100644 --- a/demos/autocomplete/index.html +++ b/demos/autocomplete/index.html @@ -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> diff --git a/demos/autocomplete/multiple.html b/demos/autocomplete/multiple.html new file mode 100644 index 000000000..5fef4bad2 --- /dev/null +++ b/demos/autocomplete/multiple.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Autocomplete multiple demo</title> + <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.2.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <script type="text/javascript"> + $(function() { + function split(val) { + return val.split(/,\s*/); + } + function extractLast(term) { + return split(term)[split(term).length - 1]; + } + + $("#birds").autocomplete({ + source: function(request, response) { + $.getJSON("search.php", { + term: extractLast(request.term) + }, response); + }, + search: function() { + // custom minLength + var term = extractLast($(this).val()); + if (term.length < 2) { + return false; + } + }, + focus: function() { + // prevent value inserted on focus + return false; + }, + select: function(event, ui) { + var terms = split( $(this).val() ); + // remove the current input + terms.pop(); + // add the selected item + terms.push( ui.item.value ); + // add placeholder to get the comma-and-space at the end + terms.push(""); + $(this).val( terms.join(", ") ); + return false; + } + }); + }); + </script> +</head> +<body> + +<div class="demo"> + +<div class="ui-widget"> + <label for="birds">Birds: </label> + <input id="birds" size="50" /> +</div> + +</div><!-- End demo --> + +<div class="demo-description"> +<p> +Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names. +</p> +<p> +This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field. +</p> +</div><!-- End demo-description --> + +</body> +</html> |