Mở rộng đề xuất của @ Jarry, tôi sẽ cập nhật mã của bạn để xác định những gì optgroup tùy chọn thuộc về. Từ đó, bạn có thể sử dụng mã tương tự như tìm thấy trên trang web jQueryUI:
(function($) {
$.widget("ui.combobox", {
_create: function() {
var input, self = this,
select = this.element.hide(),
selected = select.children(":selected"),
value = selected.val() ? selected.text() : "",
wrapper = this.wrapper = $("<span>").addClass("ui-combobox").insertAfter(select);
input = $("<input>").appendTo(wrapper).val(value).addClass("ui-state-default ui-combobox-input").autocomplete({
delay: 0,
minLength: 0,
source: function(request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response(select.find("option").map(function() {
var text = $(this).text();
if (this.value && (!request.term || matcher.test(text))) return {
label: text.replace(
new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
value: text,
option: this,
category: $(this).closest("optgroup").attr("label")
};
//MK
$('#test').attr('style', 'display: none;');
}).get());
},
select: function(event, ui) {
ui.item.option.selected = true;
self._trigger("selected", event, {
item: ui.item.option
});
},
change: function(event, ui) {
if (!ui.item) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
valid = false;
select.children("option").each(function() {
if ($(this).text().match(matcher)) {
this.selected = valid = true;
return false;
}
});
if (!valid) {
$('#test').attr('style', 'display: block;');
// remove invalid value, as it didn't match anything
//$(this).val("");
//select.val("");
//input.data("autocomplete").term = "";
//return false;
}
}
}
}).addClass("ui-widget ui-widget-content ui-corner-left");
input.data("autocomplete")._renderItem = function(ul, item) {
return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul);
};
input.data("autocomplete")._renderMenu = function(ul, items) {
var self = this,
currentCategory = "";
$.each(items, function(index, item) {
if (item.category != currentCategory) {
if (item.category) {
ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
}
currentCategory = item.category;
}
self._renderItem(ul, item);
});
};
$("<a>").attr("tabIndex", -1).attr("title", "Show All Items").appendTo(wrapper).button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
}).removeClass("ui-corner-all").addClass("ui-corner-right ui-combobox-toggle").click(function() {
// close if already visible
if (input.autocomplete("widget").is(":visible")) {
input.autocomplete("close");
return;
}
// work around a bug (likely same cause as #5265)
$(this).blur();
// pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
input.focus();
});
},
destroy: function() {
this.wrapper.remove();
this.element.show();
$.Widget.prototype.destroy.call(this);
}
});
})(jQuery);
$(function() {
$("#combobox").combobox();
$("#toggle").click(function() {
$("#combobox").toggle();
});
});
Ví dụ:http://jsfiddle.net/gB32r/
Điều này làm việc tuyệt vời. Cám ơn rất nhiều. –
Xin chào, tôi đã tìm thấy một lỗi nhỏ là sản phẩm phụ của việc điều chỉnh mà bạn đã thực hiện. Nếu tôi thả danh sách xuống và chọn một trong các tùy chọn từ danh mục, nó sẽ hiển thị "Không có kết quả phù hợp". Nếu tôi chọn một tùy chọn không thuộc danh mục, nó hoạt động tốt. Tôi đã cố gắng tìm ra nó không có kết quả. –
Nevermind đã tìm ra ... select.children ("optgroup"). Child ("option") mỗi (function() { –