library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
jzaefferer 2010-04-08 12:07:45 +02:00
parent c01b3baef9
commit ffc29bba05
1 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
demos/autocomplete/combobox.html
View File

@ -30,24 +30,23 @@
var matcher = new RegExp(request.term, "i"); var matcher = new RegExp(request.term, "i");
response(select.children("option").map(function() { response(select.children("option").map(function() {
var text = $(this).text(); var text = $(this).text();
if (!request.term || matcher.test(text)) if (this.value && (!request.term || matcher.test(text)))
return { return {
id: $(this).val(), id: this.value,
label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"), label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
value: text value: text
}; };
})); }));
}, },
delay: 0, delay: 0,
select: function(e, ui) { change: function(event, ui) {
if (!ui.item) { if (!ui.item) {
// remove invalid value, as it didn't match anything // remove invalid value, as it didn't match anything
$(this).val(""); $(this).val("");
return false; return false;
} }
$(this).focus();
select.val(ui.item.id); select.val(ui.item.id);
self._trigger("selected", null, { self._trigger("selected", event, {
item: select.find("[value='" + ui.item.id + "']") item: select.find("[value='" + ui.item.id + "']")
}); });
@ -56,6 +55,7 @@
}) })
.addClass("ui-widget ui-widget-content ui-corner-left"); .addClass("ui-widget ui-widget-content ui-corner-left");
$("<button>&nbsp;</button>") $("<button>&nbsp;</button>")
.attr("tabIndex", -1)
.attr("title", "Show All Items") .attr("title", "Show All Items")
.insertAfter(input) .insertAfter(input)
.button({ .button({
@ -81,7 +81,10 @@
})(jQuery); })(jQuery);
$(function() { $(function() {
$("select").combobox(); $("#combobox").combobox();
$("#toggle").click(function() {
$("#combobox").toggle();
});
}); });
</script> </script>
</head> </head>
@ -91,7 +94,8 @@
<div class="ui-widget"> <div class="ui-widget">
<label>Your preferred programming language: </label> <label>Your preferred programming language: </label>
<select> <select id="combobox">
<option value="">Select one...</option>
<option value="a">asp</option> <option value="a">asp</option>
<option value="c">c</option> <option value="c">c</option>
<option value="cpp">c++</option> <option value="cpp">c++</option>
@ -107,6 +111,7 @@
<option value="s">scala</option> <option value="s">scala</option>
</select> </select>
</div> </div>
<button id="toggle">Show underlying select</button>
</div><!-- End demo --> </div><!-- End demo -->