ASP.NET自動完成DropDownList

Question

是否有任何控制或JQuery插件存在爲asp.net自動完成DropDownList？ 如果是，請在此處鏈接樣本。 我不希望使用asp.net AJAX控件工具包

Answer 1

我不知道如果這是你在找什麼，但有一個很好的類似Facebook的預輸入列表在這裏：

https://github.com/emposha/FCBKcomplete

它是一個jQuery插件，它使用AJAX調用Web服務，在您鍵入時加載列表的項目，並實現一些智能緩存以節省Web服務調用。就像我說的，可能不是你想要的，但至少值得一看。

還檢查了jQuery自動完成。

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

Answer 2

jQuery的自動完成可以用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>