diff options
| author | jzaefferer <joern.zaefferer@gmail.com> | 2010-04-08 12:07:45 +0200 |
|---|---|---|
| committer | jzaefferer <joern.zaefferer@gmail.com> | 2010-04-08 12:07:45 +0200 |
| commit | ffc29bba052e4bc8b84e4c2e16036140148b6f9c (patch) | |
| tree | 9e8ea3844386b841b10c521ff3fe5ab0c4c1e43b /demos/autocomplete | |
| parent | c01b3baef97808a3a7dfafaea084c03a27e92564 (diff) | |
| download | jquery-ui-ffc29bba052e4bc8b84e4c2e16036140148b6f9c.tar.gz jquery-ui-ffc29bba052e4bc8b84e4c2e16036140148b6f9c.zip | |
Autocomplete: Combobox demo update, fixed mustMatch with corrected change event, also added button for toggling the hidden select and an empty-value option. Fixes #5453
Diffstat (limited to 'demos/autocomplete')
| -rw-r--r-- | demos/autocomplete/combobox.html | 19 |
1 files changed, 12 insertions, 7 deletions
diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html index 4c6b656a1..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(), + 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 --> |