ASP.NET Auto Complete DropDownList

Question

Is there any Control or JQuery plugin for asp.net Auto Complete DropDownList? If yes, please provide a sample here. I do not want to use asp.net ajax toolkit control

Answer 1

I do not know if this is what you are looking for, but there is a nice list here similar to Facebook:

https://github.com/emposha/FCBKcomplete

This is a jQuery plugin and uses AJAX to call a web service to load items for a list as you type and implement some smart caching, and to save web service calls. As I said, maybe this is not exactly what you are looking for, but at least it's worth a look.

Also check jQuery autocomplete.

http://jqueryui.com/demos/autocomplete/

Answer 2

jQuery Autocomplete can work with DropDownList

http://jqueryui.com/demos/autocomplete/#combobox

Answer 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>