Я использую модифицированную версию этого: http://jqueryui.com/demos/autocomplete/#combobox, которая использует AJAX для получения JSON вместо предварительно заполненного в select
.У меня есть два из них
Поскольку я выбираю язык из и в, я не хочу, чтобы тот же язык появлялся в следующем автозаполнении.Как бы вы подошли к этому?
(function( $ ) {
$.widget("ui.combobox", {
_create: function() {
var self = this,
opts = this.options,
cbelement = this.element.hide(),
value = cbelement.val();
var input = this.input = $("")
.insertAfter(cbelement)
.val(value)
.autocomplete({
delay: 0,
minLength: 0,
source: function(request, response) {
$.ajax({
url: opts.sourceUrl, type: "POST", dataType: "json",
data: { searchText: request.term },
success: function (data) {
response($.map(data, function (item) {
return {
value: item.value,
label: item.label,
}
}))
},
});
},
select: function(event, ui) {
$(this).val(ui.item.label);
$(opts.targetEl).val(ui.item.value);
return false;
}
})
.addClass("ui-widget ui-widget-content ui-corner-left required");
input.data("autocomplete")._renderItem = function( ul, item ) {
return $("<li></li>")
.data( "item.autocomplete", item )
.append( "" + item.label + "" )
.appendTo(ul);
};
this.button = $(" ")
.attr("tabIndex", -1)
.attr("title", "Show All Items")
.insertAfter(input)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("ui-corner-right ui-button-icon")
.click(function() {
if ( input.autocomplete("widget").is(":visible")) {
input.autocomplete("close");
return;
}
$( this ).blur();
input.autocomplete("search", "");
input.focus();
});
},
destroy: function() {
this.input.remove();
this.button.remove();
this.element.show();
$.Widget.prototype.destroy.call( this );
},
options: {
sourceUrl: '',
targetEl: '',
filter_selected: [],
}
});
})(jQuery);