ASP.NET Auto Complete DropDownList

Question

¿Existe algún complemento de control o Jquery para asp.net Auto Complete DropDownList? En caso afirmativo, enlace una muestra aquí. no quiero uso asp.net control de kit de herramientas AJAX

Answer 1

No sé si esto es lo que estás buscando, pero hay una buena lista de Facebook como de escritura anticipada aquí:

https://github.com/emposha/FCBKcomplete

Es un complemento jQuery, y utiliza AJAX para llamar a un servicio web y cargar los elementos de la lista mientras escribe, e implementa algo de almacenamiento en caché inteligente para ahorrar en llamadas al servicio web. Como dije, puede que no sea exactamente lo que estás buscando, pero al menos vale la pena echarle un vistazo.

También consulte la función de autocompletar jQuery.

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

Answer 2

jQuery Autocompletar puede trabajar con 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>