ASP.NET Auto Complete DropDownList

Question

existe-t-il un plug-in Control ou Jquery pour asp.net Auto Complete DropDownList? si oui s'il vous plaît lier un échantillon ici. Je ne veux pas utiliser asp.net boîte à outils de contrôle ajax

Answer 1

Je ne sais pas si c'est ce que vous cherchez, mais il y a une belle liste de type Facebook avant-comme ici:

https://github.com/emposha/FCBKcomplete Il s'agit d'un plugin jQuery, qui utilise AJAX pour appeler un service Web afin de charger les éléments de la liste pendant que vous tapez, et implémente également une mise en cache intelligente pour enregistrer les appels de service Web. Comme je l'ai dit, peut-être pas exactement ce que vous cherchez, mais ça vaut le coup d'oeil au moins.

Vérifiez également la saisie semi-automatique jQuery.

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

Answer 2

jQuery peut travailler avec saisie semi-automatique 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>