Реализация редактируемого DropDownList в ASP.NET
Какой самый элегантный способ реализации DropDownList в ASP.NET, который можно редактировать без использования сторонних компонентов.
В крайнем случае, я, вероятно, попробую использовать TextBox с AutoCompleteExtender с изображением для «выпадающего» списка; или TextBox, перекрывающий HTML Select с некоторым JavaScript для заполнения значений от Select до TextBox. Но я очень надеюсь, что есть более лаконичное и удобное в обслуживании решение.
Заранее спасибо.
Несколько, но все они кажутся собственностью.
Попробуйте ComboBox из набора инструментов управления Ajax: asp.net/AJAX/AjaxControlToolkit/Samples/ComboBox/ComboBox.as px
Ответы 3
Один элемент управления на странице
Вы можете следовать этот простой пример для редактируемого DropDownlist в Code Project, который использует стандартные элементы управления ASP.NET TextBox и DropDownList в сочетании с некоторым JavaScript.
Однако код не работал у меня, пока я не добавил ссылку для получения значений ClientID для TextBox и DropDownList:
<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 + "();");
///..
Это один из способов избежать использования сторонних элементов управления.
@ray У меня такой же похожий код. Теперь я хочу, чтобы тот же раскрывающийся список принимал вводимый текст. Я не хочу изобретать раскрывающийся список заново. Ваша помощь очень ценится. Спасибо!
ссылка мертва!
Решение 2 здесь помогло мне. так ласково для Рэя.
Также вам следует изучить 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"
Вы можете попробовать использовать JqueryUI Autocomplete Combobox.
Это позволит вам вводить текст, а также выбирать нужный элемент из раскрывающегося списка.
В качестве дополнительной функции он позволяет использовать функцию автозаполнения для улучшения пользовательского интерфейса.
Я прилагаю демонстрацию, которая связана с загрузкой 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)
Internet Explorer 11
Firefox 36.0.1
Visual Studio 2013 edition
Надеюсь, это решит вашу проблему.
Вы видите в сети что-то похожее на то, что вы пытаетесь подражать?