Do you know why introducing jquery ui autocomplete for my dropdown boxes is also changing my listbox
Posted
by oo
on Stack Overflow
See other posts from Stack Overflow
or by oo
Published on 2010-04-01T12:37:59Z
Indexed on
2010/04/01
21:43 UTC
Read the original article
Hit count: 307
I am trying to change my comboboxes to use autocomplete so i leverage the code listed here (which worked perfectly for my dropdowns)
The issue is that i also on the same page have a listbox 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)
}
))%>
and it appears that the jquery ui code is changing this to a autocomplete dropdown as well (as opposed to keeping it as a multi select list box)
any idea how to prevent this from happening?
i literally am just using the exact code on this page
<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>
© Stack Overflow or respective owner