Sapete perché l'introduzione di jQuery UI completamento automatico per le mie caselle a discesa sta cambiando anche il mio listbox?
-
23-09-2019 - |
Domanda
Sto cercando di cambiare i miei comboboxes per l'uso di completamento automatico in modo da sfruttare i il codice elencato qui (che ha funzionato perfettamente per i miei menù a discesa)
Il problema è che ho anche sulla stessa pagina ho una casella di riepilogo con il seguente codice:
<%= Html.ListBox("Cars", Model.BodyParts.Select(
x => new SelectListItem {
Text = x.Name,
Value = x.Id,
Selected = Model.CarsSelected.Any(y => y.Id == x.Id)
}
))%>
e sembra che il codice jQuery UI sta cambiando a un menu a discesa di completamento automatico e (al contrario di tenerlo come una casella di riepilogo di selezione più)
alcuna idea di come evitare che ciò accada?
Ho letteralmente sto solo usando il codice esatto in questa pagina
<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>
Soluzione
sto cercando di indovinare che il selettore di JQuery (non fornito in questione) è catturare tutti i menù a discesa sulla pagina. Si dovrebbe guardare a rendere più specifico, molto probabilmente riferimento l'elemento per ID. Ci sono un sacco di buoni esempi nella documentazione JQuery: