在ASP.NET中实现可编辑的DropDownList
[英]Implementing an editable DropDownList in ASP.NET
问题描述
What's the most elegant way of implementing a DropDownList in ASP.NET that is editable without using 3rd party components. 
在ASP.NET中实现DropDownList的最优雅的方法是什么，而无需使用第三方组件就可以进行编辑的最优雅的方法是什么。
As a last resort I will probably try using a TextBox with an AutoCompleteExtender with an image to 'drop down' the list; 作为最后的选择，我可能会尝试使用带有AutoCompleteExtender的TextBox和图像来“下拉”列表。 or a TextBox overlapping a HTML Select with some JavaScript to fill values from the Select to the TextBox . 或将HTML Select与某些JavaScript重叠的TextBox ，以将Select中的值填充到TextBox 。 But I'm really hoping there is a more terse and maintainable solution. 但是我真的希望有一个更简洁和可维护的解决方案。
Thanks in advance. 提前致谢。
3 个解决方案
解决方案1
5 2009-10-20 02:06:39
One Control on a Page 页面上的一个控件
You can follow
this simple example for an Editable DropDownlist on Code Project
that uses standard ASP.NET TextBox and DropDownList controls combined with some JavaScript. 您可以按照
以下简单示例来了解代码项目上的可编辑DropDownlist，该项目
使用标准ASP.NET TextBox和DropDownList控件以及一些JavaScript。
However, the code did not work for me until I added a reference to get the ClientID values for the TextBox and DropDownList: 但是，在我添加引用以获取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>
Finally, in the code behind just like in the original example, I added the following to page load: 最后，在后面的代码中，就像在原始示例中一样，我在页面加载中添加了以下内容：
protected void Page_Load(object sender, EventArgs e)
{
ddSelect.Attributes.Add("onChange", "DisplayText();");
}
Multiple Controls on a Page 页面上的多个控件
I placed all of the above code in its own ASCX User Control to make it reusable across my project. 我将以上所有代码放在自己的ASCX用户控件中，以使其在我的项目中可重复使用。 However, the code as presented above only works if you require just one editable DropDownList on a given page. 但是，只有在给定页面上仅需要一个可编辑的DropDownList时，上述代码才有效。
If you need to support multiple custom DropDownList controls on a single page, it is necessary to set the JavaScript function name to be unique to avoid conflicts. 如果需要在单个页面上支持多个自定义DropDownList控件，则必须将JavaScript函数名称设置为唯一以避免冲突。 Do this by once again using the ClientID: 再次使用ClientID执行此操作：
in the ASCX file: 在ASCX文件中：
function DisplayText_<% = ClientID %>(){...}
in the code behind: 在后面的代码中：
/// ...
ddSelect.Attributes.Add("onChange", "DisplayText_" + ClientID + "();");
///..
This is one way to avoid using 3rd party controls. 这是避免使用第三方控件的一种方法。
解决方案2
1 2017-03-03 09:01:28
You can try using JqueryUI Autocomplete Combobox. 您可以尝试使用JqueryUI自动完成组合框。
It will let you type in text as well as select the item of your choice from a dropdown. 它将允许您输入文本以及从下拉菜单中选择所需的项目。
As an extra feature it lets you use the autocomplete feature to get a enhance UI experience. 作为一项附加功能，它使您可以使用自动完成功能来获得增强的UI体验。
I am attaching a demo which is coupled with bootstrap 3.3.4 我正在附上一个与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 Browser Version 43.0.2334.0 dev-m (64-bit)
Chrome浏览器版本43.0.2334.0 dev-m（64位）
Internet Explorer 11
Internet Explorer 11
Firefox 36.0.1
Firefox 36.0.1
Visual Studio 2013 edition
Visual Studio 2013版
Hope this solves your issue. 希望这能解决您的问题。
解决方案3
1 2011-02-10 18:38:41
The 2 solution here did the trick for me. 这里的2解决方案对我有用。 so koodos for Ray. 所以雷是koodos。
Also you should look into the http://ajaxcontroltoolkit.codeplex.com/releases/view/43475 , which is the ajaxcontroltoolkit. 此外，您还应该查看http://ajaxcontroltoolkit.codeplex.com/releases/view/43475 ，它是ajaxcontroltoolkit。
I don't believe the version for framework 4 comes with a comboBox component, which is here: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ComboBox/ComboBox.aspx and is very cool. 我认为框架4的版本不带有comboBox组件，该组件位于此处： http : //www.asp.net/AJAX/AjaxControlToolkit/Samples/ComboBox/ComboBox.aspx ，非常酷。 Specially if you set it like this: 特别是如果您这样设置：
ajaxToolkit:ComboBox ID=ComboBox1 runat=server AutoPostBack=False
DropDownStyle=DropDown AutoCompleteMode=Suggest
CaseSensitive=False ItemInsertLocation="OrdinalText"
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.