diff options
Diffstat (limited to 'demos/autocomplete')
| -rw-r--r-- | demos/autocomplete/combobox.html | 21 | ||||
| -rw-r--r-- | demos/autocomplete/index.html | 3 | ||||
| -rw-r--r-- | demos/autocomplete/multiple-remote.html | 75 | ||||
| -rw-r--r-- | demos/autocomplete/multiple.html | 69 | ||||
| -rw-r--r-- | demos/autocomplete/remote-with-cache.html | 7 | ||||
| -rw-r--r-- | demos/autocomplete/remote.html | 1 |
6 files changed, 163 insertions, 13 deletions
diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html index e5dc6c92b..3001f7d17 100644 --- a/demos/autocomplete/combobox.html +++ b/demos/autocomplete/combobox.html @@ -30,24 +30,23 @@ var matcher = new RegExp(request.term, "i"); response(select.children("option").map(function() { var text = $(this).text(); - if (!request.term || matcher.test(text)) + if (this.value && (!request.term || matcher.test(text))) return { - id: $(this).val(), - label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"), + id: this.value, + label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"), value: text }; })); }, delay: 0, - select: function(e, ui) { + change: function(event, ui) { if (!ui.item) { // remove invalid value, as it didn't match anything $(this).val(""); return false; } - $(this).focus(); select.val(ui.item.id); - self._trigger("selected", null, { + self._trigger("selected", event, { item: select.find("[value='" + ui.item.id + "']") }); @@ -56,6 +55,7 @@ }) .addClass("ui-widget ui-widget-content ui-corner-left"); $("<button> </button>") + .attr("tabIndex", -1) .attr("title", "Show All Items") .insertAfter(input) .button({ @@ -81,7 +81,10 @@ })(jQuery); $(function() { - $("select").combobox(); + $("#combobox").combobox(); + $("#toggle").click(function() { + $("#combobox").toggle(); + }); }); </script> </head> @@ -91,7 +94,8 @@ <div class="ui-widget"> <label>Your preferred programming language: </label> - <select> + <select id="combobox"> + <option value="">Select one...</option> <option value="a">asp</option> <option value="c">c</option> <option value="cpp">c++</option> @@ -107,6 +111,7 @@ <option value="s">scala</option> </select> </div> +<button id="toggle">Show underlying select</button> </div><!-- End demo --> diff --git a/demos/autocomplete/index.html b/demos/autocomplete/index.html index 9389b076d..ba96d994e 100644 --- a/demos/autocomplete/index.html +++ b/demos/autocomplete/index.html @@ -16,6 +16,9 @@ <li><a href="combobox.html">Combobox</a></li> <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> + <li><a href="multiple-remote.html">Multiple, remote</a></li> </ul> </div> </body> diff --git a/demos/autocomplete/multiple-remote.html b/demos/autocomplete/multiple-remote.html new file mode 100644 index 000000000..5e0f4b50b --- /dev/null +++ b/demos/autocomplete/multiple-remote.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).pop(); + } + + $("#birds").autocomplete({ + source: function(request, response) { + $.getJSON("search.php", { + term: extractLast(request.term) + }, response); + }, + search: function() { + // custom minLength + var term = extractLast(this.value); + if (term.length < 2) { + return false; + } + }, + focus: function() { + // prevent value inserted on focus + return false; + }, + select: function(event, ui) { + var terms = split( this.value ); + // 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.value = 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> diff --git a/demos/autocomplete/multiple.html b/demos/autocomplete/multiple.html new file mode 100644 index 000000000..908cfe6ce --- /dev/null +++ b/demos/autocomplete/multiple.html @@ -0,0 +1,69 @@ +<!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() { + var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]; + function split(val) { + return val.split(/,\s*/); + } + function extractLast(term) { + return split(term).pop(); + } + + $("#tags").autocomplete({ + minLength: 0, + source: function(request, response) { + // delegate back to autocomplete, but extract the last term + response($.ui.autocomplete.filter(availableTags, extractLast(request.term))); + }, + focus: function() { + // prevent value inserted on focus + return false; + }, + select: function(event, ui) { + var terms = split( this.value ); + // 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.value = terms.join(", "); + return false; + } + }); + }); + </script> +</head> +<body> + +<div class="demo"> + +<div class="ui-widget"> + <label for="tags">Tag programming languages: </label> + <input id="tags" size="50" /> +</div> + +</div><!-- End demo --> + +<div class="demo-description"> +<p> +Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more. +</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> diff --git a/demos/autocomplete/remote-with-cache.html b/demos/autocomplete/remote-with-cache.html index 3688365d4..a00c741e4 100644 --- a/demos/autocomplete/remote-with-cache.html +++ b/demos/autocomplete/remote-with-cache.html @@ -22,12 +22,11 @@ source: function(request, response) { if (cache.term == request.term && cache.content) { response(cache.content); + return; } if (new RegExp(cache.term).test(request.term) && cache.content && cache.content.length < 13) { - var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); - response($.grep(cache.content, function(value) { - return matcher.test(value.value) - })); + response($.ui.autocomplete.filter(cache.content, request.term)); + return; } $.ajax({ url: "search.php", diff --git a/demos/autocomplete/remote.html b/demos/autocomplete/remote.html index 3b0d7096d..9414102e6 100644 --- a/demos/autocomplete/remote.html +++ b/demos/autocomplete/remote.html @@ -18,7 +18,6 @@ } $("#birds").autocomplete({ - // TODO doesn't work when loaded from /demos/#autocomplete|remote source: "search.php", minLength: 2, select: function(event, ui) { |