c# - 使用 Jquery 的可编辑下拉列表？

Question

可编辑下拉列表在从此链接引用的 .aspx 页面中工作正常:

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

但是如果我在母版页中使用相同的代码..我得不到输出(可编辑下拉列表)..

我能做什么？

<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/