在 ASP.NET 中实现可编辑的 DropDownList答案

【问题标题】：Implementing an editable DropDownList in ASP.NET在 ASP.NET 中实现可编辑的 DropDownList
【发布时间】：2008-10-30 03:19:46
【问题描述】：

在 ASP.NET 中实现 DropDownList 的最优雅方式是什么，无需使用 3rd 方组件即可编辑。

作为最后的手段，我可能会尝试使用TextBox 和带有图像的AutoCompleteExtender 来“下拉”列表；或 TextBox 将 HTML Select 与一些 JavaScript 重叠，以将 Select 中的值填充到 TextBox。但我真的希望有一个更简洁和可维护的解决方案。

提前致谢。

【问题讨论】：

您是否在网络上看到了与您试图模仿的内容相似的内容？
一些，但它们似乎都是专有的。
试试 Ajax 控制工具包中的 ComboBox：asp.net/AJAX/AjaxControlToolkit/Samples/ComboBox/ComboBox.aspx

标签： asp.net javascript user-controls drop-down-menu

【解决方案1】：

页面上的一个控件

您可以关注~~this simple example for an Editable DropDownlist on Code Project~~，它使用标准的 ASP.NET TextBox 和 DropDownList 控件以及一些 JavaScript。

但是，在我添加一个引用以获取 TextBox 和 DropDownList 的 ClientID 值之前，该代码对我不起作用：

<script language="javascript" type="text/javascript">

function DisplayText()
{
    var textboxId = '<% = txtDisplay.ClientID %>';
    var comboBoxId = '<% = ddSelect.ClientID %>';
    document.getElementById(textboxId).value = document.getElementById(comboBoxId).value;
    document.getElementById(textboxId).focus();
}
</script>    

<asp:TextBox style="width:120px;position:absolute" ID="txtDisplay" runat="server"></asp:TextBox>

<asp:DropDownList ID="ddSelect" style="width:140px" runat="server">    
    <asp:ListItem Value="test1" >test1</asp:ListItem>    
    <asp:ListItem Value="test2">test2</asp:ListItem>    
</asp:DropDownList>

最后，在后面的代码中，就像在原始示例中一样，我在页面加载中添加了以下内容：

protected void Page_Load(object sender, EventArgs e)
{
    ddSelect.Attributes.Add("onChange", "DisplayText();");
}

一个页面上的多个控件

我将上述所有代码放在它自己的 ASCX 用户控件中，以使其可在我的项目中重复使用。但是，只有在给定页面上只需要一个可编辑的 DropDownList 时，上述代码才有效。

如果需要在单个页面上支持多个自定义的 DropDownList 控件，则需要将 JavaScript 函数名称设置为唯一以避免冲突。再次使用 ClientID 执行此操作：

在 ASCX 文件中：

function DisplayText_<% = ClientID %>(){...}

在后面的代码中：

/// ...
ddSelect.Attributes.Add("onChange", "DisplayText_" + ClientID + "();");
///..

这是避免使用第 3 方控件的一种方法。

【讨论】：

@ray 我有相同的类似代码。现在我想要相同的下拉列表来接受输入文本。我不想重新发明下拉菜单。非常感谢您的帮助。谢谢！
链接失效了！

【解决方案2】：

您可以尝试使用 JqueryUI 自动完成组合框。
它可以让您输入文本以及从下拉列表中选择您选择的项目。
作为一项额外功能，您可以使用自动完成功能来增强 UI 体验。

我附上了一个与 bootstrap 3.3.4 结合的演示

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
  <title></title>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link href="https://jqueryui.com/resources/demos/style.css" rel="stylesheet" />
  <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;
    }
    .ui-state-default,
    .ui-widget-content .ui-state-default,
    .ui-widget-header .ui-state-default {
      border: 1px solid #421D1D;
      background: #ffffff url("images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x !important;
      font-weight: normal;
      color: #555555;
    }
    /* Corner radius */
    .ui-corner-all,
    .ui-corner-top,
    .ui-corner-left,
    .ui-corner-tl {
      border-top-left-radius: 0px !important;
    }
    .ui-corner-all,
    .ui-corner-top,
    .ui-corner-right,
    .ui-corner-tr {
      border-top-right-radius: 0px !important;
    }
    .ui-corner-all,
    .ui-corner-bottom,
    .ui-corner-left,
    .ui-corner-bl {
      border-bottom-left-radius: 0px !important;
    }
    .ui-corner-all,
    .ui-corner-bottom,
    .ui-corner-right,
    .ui-corner-br {
      border-bottom-right-radius: 0px !important;
    }
  </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>
</head>

<body>
  <form id="form1" runat="server">
    <div>
      <div class="ui-widget">
        <select id="combobox" class="form-control">
          <option value="">Select your option</option>
          <option value="Apple">Apple</option>
          <option value="Banana">Banana</option>
          <option value="Cherry">Cherry</option>
          <option value="Date">Date</option>
          <option value="Fig">Fig</option>
          <option value="Grape">Grape</option>
          <option value="Kiwi">Kiwi</option>
          <option value="Mango">Mango</option>
          <option value="Orange">Orange</option>
          <option value="Pumpkin">Pumpkin</option>
          <option value="Strawberry">Strawberry</option>
          <option value="Tomato">Tomato</option>
          <option value="Watermelon">Watermelon</option>
        </select>
      </div>

    </div>
  </form>
</body>

</html>

我已经在以下所有设置上测试了此代码测试环境：
Chrome 浏览器版本 43.0.2334.0 dev-m（64 位）
Internet Explorer 11
火狐 36.0.1
Visual Studio 2013 版

希望这能解决您的问题。

【讨论】：

【解决方案3】：

这里的 2 解决方案对我有用。对雷来说真是太棒了。

您还应该查看 http://ajaxcontroltoolkit.codeplex.com/releases/view/43475，它是 ajaxcontroltoolkit。

我不相信框架 4 的版本带有组合框组件，这里是：http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ComboBox/ComboBox.aspx，非常酷。特别是如果你这样设置：

ajaxToolkit:ComboBox ID=ComboBox1 runat=server AutoPostBack=False 
   DropDownStyle=DropDown  AutoCompleteMode=Suggest  
               CaseSensitive=False ItemInsertLocation="OrdinalText"

【讨论】：