我使用的是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 $("")
.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);