Редактируемый выпадающий список с помощью JQuery?

Question

редактируемые DropDownList работает нормально в .aspx страницы, указанной в этой ссылке:

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

Но если я использую тот же код на главной странице .. Я не получаю Вывода (редактируемые DropDownList) ..

что я могу сделать?

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 

<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 

<style> 
    .custom-combobox 
    { 
     position: relative; 
     display: inline-block; 
    } 
    .custom-combobox-toggle 
    { 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     margin-left: -1px; 
     padding: 0; 
    } 
    .custom-combobox-input 
    { 
     margin: 0; 
     padding: 5px 10px; 
    } 
</style> 

<script> 
    (function($) { 
     $.widget("custom.combobox", { 
      _create: function() { 
       this.wrapper = $("<span>") 
     .addClass("custom-combobox") 
     .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>") 
     .appendTo(this.wrapper) 
     .val(value) 
     .attr("title", "") 
     .addClass("custom-combobox-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") 
     .tooltip() 
     .appendTo(this.wrapper) 
     .button({ 
      icons: { 
       primary: "ui-icon-triangle-1-s" 
      }, 
      text: false 
     }) 
     .removeClass("ui-corner-all") 
     .addClass("custom-combobox-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.autocomplete("instance").term = ""; 
      }, 

      _destroy: function() { 
       this.wrapper.remove(); 
       this.element.show(); 
      } 
     }); 
    })(jQuery); 

    $(function() { 
     $("#combobox").combobox(); 
     $("#toggle").click(function() { 
      $("#combobox").toggle(); 
     }); 
    }); 
</script> 

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> 

<div> 
    <div class="ui-widget"> 
     <%-- <select id="combobox" runat="server" >--%> 
     <asp:DropDownList ID="combobox" runat="server"> 
     <asp:ListItem Text="--Select--" Value="0"></asp:ListItem> 
     <asp:ListItem Text="ABC" Value="1"></asp:ListItem> 
     <asp:ListItem Text="CBI" Value="2"></asp:ListItem> 
     <asp:ListItem Text="IBM" Value="3"></asp:ListItem> 
     </asp:DropDownList> 
    </div> 
</div> 

</asp:Content> 

Answer 1

Любой попробовать это? Кажется, чтобы сделать работу

http://xdsoft.net/jquery-plugins/editableselect/