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

Question

在ASP.NET中实现DropDownList的最优雅的方法是什么，而无需使用第三方组件就可以进行编辑的最优雅的方法是什么。

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

提前致谢。

Answer 1

页面上的一个控件

您可以按照 ~~以下简单示例来了解代码项目上的可编辑DropDownlist，该项目~~ 使用标准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 + "();");
///..

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

Answer 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
Firefox 36.0.1
Visual Studio 2013版

希望这能解决您的问题。

Answer 3

这里的2解决方案对我有用。 所以雷是koodos。

此外，您还应该查看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"

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

问题描述

3 个解决方案

解决方案1
5 2009-10-20 02:06:39

页面上的一个控件

页面上的多个控件

解决方案2
1 2017-03-03 09:01:28

解决方案3
1 2011-02-10 18:38:41

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

问题描述

3 个解决方案

解决方案1 5 2009-10-20 02:06:39

页面上的一个控件

页面上的多个控件

解决方案2 1 2017-03-03 09:01:28

解决方案3 1 2011-02-10 18:38:41

解决方案1
5 2009-10-20 02:06:39

解决方案2
1 2017-03-03 09:01:28

解决方案3
1 2011-02-10 18:38:41