ASP.NET Auto Complete DropDownList

Question

là có bất kỳ kiểm soát hoặc Jquery Plugin tồn tại cho asp.net Auto Complete DropDownList? nếu có, vui lòng liên kết mẫu tại đây. Tôi không muốn sử dụng asp.net kiểm soát ajax toolkit

Answer 1

Tôi không biết nếu điều này là những gì bạn đang tìm kiếm nhưng có một đẹp Facebook giống như kiểu trước danh sách ở đây:

https://github.com/emposha/FCBKcomplete

Đây là một plugin jQuery và sử dụng AJAX để gọi dịch vụ web để tải các mục cho danh sách khi bạn nhập và thực hiện một số bộ nhớ đệm thông minh để lưu trên các cuộc gọi dịch vụ web. Như tôi đã nói, có thể không chính xác những gì bạn đang tìm kiếm, nhưng nó đáng giá ít nhất.

Ngoài ra, hãy kiểm tra tính năng tự động hoàn thành của jQuery.

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

Answer 2

jQuery AutoComplete có thể làm việc với 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>