//just put this script in your page and call the class combobox2 in your dropdownlist
<script type="text/javascript">
(function ($) {
$.widget("custom.combobox2", {
_create: function() {
this.wrapper = $("<span>")
.addClass("custom-combobox2")
.insertAfter(this.element);
this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},
_createAutocomplete: function() {
var selected = this.element.children(":selected"),
value = selected.val() ? selected.text() : "";
this.input = $("<input style='width:auto;'>")
.appendTo(this.wrapper)
.val(value)
.attr("title", "")
.addClass("custom-combobox2-input ui-widget ui-widget-content ui-state-default ui-corner-left")
.autocomplete({
delay: 0,
minLength: 0,
source: $.proxy(this, "_source")
})
.tooltip({
tooltipClass: "ui-state-highlight"
});
this._on(this.input, {
autocompleteselect: function (event, ui) {
ui.item.option.selected = true;
this._trigger("select", event, {
item: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
},
_createShowAllButton: function() {
var input = this.input,
wasOpen = false;
$("<a>")
.attr("tabIndex", -1)
.attr("title", "Show All Items")
.appendTo(this.wrapper)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("custom-combobox2-toggle ui-corner-right")
.mousedown(function() {
wasOpen = input.autocomplete("widget").is(":visible");
})
.click(function() {
input.focus();
// Close if already visible
if (wasOpen) {
return;
}
// Pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
});
},
_source: function (request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response(this.element.children("option").map(function() {
var text = $(this).text();
if (this.value && (!request.term || matcher.test(text)))
return {
label: text,
value: text,
option: this
};
}));
},
_removeIfInvalid: function (event, ui) {
// Selected an item, nothing to do
if (ui.item) {
return;
}
// Search for a match (case-insensitive)
var value = this.input.val(),
valueLowerCase = value.toLowerCase(),
valid = false;
this.element.children("option").each(function() {
if ($(this).text().toLowerCase() === valueLowerCase) {
this.selected = valid = true;
return false;
}
});
// Found a match, nothing to do
if (valid) {
return;
}
// Remove invalid value
this.input
.val("")
.attr("title", value + " didn't match any item")
.tooltip("open");
this.element.val("");
this._delay(function() {
this.input.tooltip("close").attr("title", "");
}, 2500);
this.input.data("ui-autocomplete").term = "";
},
_destroy: function() {
this.wrapper.remove();
this.element.show();
}
});
})(jQuery);
$(function() {
$(".combobox2").combobox2();
$(".combobox2").combobox2({
select: function (event, ui) {
var f = document.getElementById("<%=form1.ClientID%>");
f.submit();
}
});
});
</script>
<asp:DropDownList ID="DDL_Groups4_Assign" runat="server" AppendDataBoundItems="True" AutoPostBack="True" CausesValidation="True" OnSelectedIndexChanged="DDL_Groups4_Assign_SelectedIndexChanged" Width="250px" CssClass="combobox2">
<asp:ListItem Selected="True">Select</asp:ListItem>
</asp:DropDownList>
çalışabilir Ama nasıl ben jQuery Ui Otomatik Tamamlama asp.net DropDownList ile kullanabilirim? – Shahin
iyi, gerçekten bu durumda bir asp.net açılan listesi kullanmak istemezsiniz. jquery otomatik tamamlama özelliğini kullanmak ve listeyi açılır listenin olası değerleriyle doldurmak istersiniz. Açılan listenin yerine, bir id ve runat = 'server' belirtilmiş bir giriş koyduktan sonra, sayfa geri döndüğünde sunucu tarafında bu değeri kontrol edersiniz. –
çok net olmayabilir. buraya bakın: http://jqueryui.com/demos/autocomplete/ ve örnek kodu görmek için kaynağı görüntülediğinizden emin olun. Bu kaynağı okuyarak işler sizin için daha net hale getirilmelidir. –