I have been attempting to update my comboboxes to utilize autocomplete, so I found this code (which worked beautifully for my dropdown menus)
The problem arises when I also have a listbox on the same page with the following code:
<%= Html.ListBox("Cars", Model.BodyParts.Select(
x => new SelectListItem {
Text = x.Name,
Value = x.Id,
Selected = Model.CarsSelected.Any(y => y.Id == x.Id)
}
))%>
It seems that the jquery ui code is inadvertently converting this into an autocomplete dropdown as well, instead of retaining it as a multi-select list box.
Any suggestions on how to prevent this undesired behavior?
I am essentially using the exact code found here:
<script type="text/javascript">
(function($) {
$.widget("ui.combobox", {
_create: function() {
var self = this;
var select = this.element.hide();
var input = $("<input>")
.insertAfter(select)
.autocomplete({
source: function(request, response) {
var matcher = new RegExp(request.term, "i");
response(select.children("option").map(function() {
var text = $(this).text();
if (!request.term || matcher.test(text))
return {
id: $(this).val(),
label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
value: text
};
}));
},
delay: 0,
select: function(e, 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, {
item: select.find("[value='" + ui.item.id + "']")
});
},
minLength: 0
})
.addClass("ui-widget ui-widget-content ui-corner-left");
$("<button> </button>")
.insertAfter(input)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
}).removeClass("ui-corner-all")
.addClass("ui-corner-right ui-button-icon")
.position({
my: "left center",
at: "right center",
of: input,
offset: "-1 0"
}).css("top", "")
.click(function() {
// close if already visible
if (input.autocomplete("widget").is(":visible")) {
input.autocomplete("close");
return;
}
// pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
input.focus();
});
}
});
})(jQuery);
$(function() {
$("select").combobox();
});
</script>