ASP.NET Auto Complete DropDownList
36,170
Solution 1
I don't know if this is what you're looking for but there is a nice Facebook-like type-ahead list here:
https://github.com/emposha/FCBKcomplete
It is a jQuery plugin, and uses AJAX to call a web service to load the items for the list as you type, and implements some smart caching as well to save on web service calls. Like I said, might not be exactly what you're looking for, but it's worth a glance at least.
Also check out jQuery autocomplete.
http://jqueryui.com/demos/autocomplete/
Solution 2
jQuery AutoComplete can work with DropDownList
http://jqueryui.com/demos/autocomplete/#combobox
Solution 3
//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>
Comments
-
Shahin almost 2 years
is there any Control or Jquery Plugin exist for asp.net Auto Complete DropDownList? if yes please link a sample here. I don't want use asp.net ajax control toolkit
-
Shahin over 13 yearsBut how can i use Jquery Ui autoCOmplete with asp.net DropDownList?
-
Brandon Montgomery over 13 yearswell, you really wouldn't want to use an asp.net dropdownlist in this case. you'd want to use jquery autocomplete, and populate the list with the possible values of your drop down list. in place of the drop down list, you'd put an input with an id and runat='server' specified, then check that value on server side when the page posts back.
-
Brandon Montgomery over 13 yearsthat may not be very clear. look here: jqueryui.com/demos/autocomplete and make sure to view source to see the example code. things should become more clear to you by reading that source.
-
jaminto over 13 yearswhat he's looking for is an autocomplete that works on a name-value pair. a dropdown list would be the obvious choice for a ui element. the user types text, and it filters on the display text of the dropdown elements, but when submitted, it submits the value of the selected text. I'm looking for the same thing, and not finding a plug and play implementation....
