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

时间:2008-10-30 03:19:46

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

在ASP.NET中实现DropDownList的最优雅方法是在不使用第三方组件的情况下进行编辑。

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

提前致谢。

3 个答案:

答案 0 :(得分:5)

页面上的一个控件

您可以关注使用标准ASP.NET TextBox和DropDownList控件并结合一些JavaScript的this simple example for an Editable DropDownlist on Code Project

但是,在我添加了一个获取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 + "();");
///..

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

答案 1 :(得分:1)

这里的2解决方案对我有用。所以对于Ray来说是个好消息。

此外,您应该查看http://ajaxcontroltoolkit.codeplex.com/releases/view/43475,这是ajaxcontroltoolkit。

我不相信框架4的版本附带了一个comboBox组件,它在这里: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" 

答案 2 :(得分:1)

您可以尝试使用JqueryUI Autocomplete Combobox 它可以让您输入文本,也可以从下拉列表中选择您选择的项目 作为一项额外功能,它允许您使用自动完成功能来获得增强的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
Firefox 36.0.1
Visual Studio 2013版

希望这能解决您的问题。