当用户输入特殊字符(例如%)时，如何显示菜单或下拉列表？
当用户输入特殊字符(例如%)时，如何显示菜单或下拉列表？
提问于 2022-06-14 04:07:42
我是asp.net的新手，我想问这个问题，这样就能让我找到正确的方向。
我想要的实现是，如果用户在文本框中输入特殊字符(例如：%)，则显示多个选项的文本框旁边会出现一个网格/菜单/下拉列表，并且当用户单击文本框中附加的某个选项时，网格将消失。
以下是javascript代码：
<asp:textbox id="txtUsername" runat="server" CssClass="DefaultTextBox"
onkeypress="javascript: return Key_Press(event);">
function Key_Press(e)
{
var keynum;
if (window.event) { // IE
keynum = e.keyCode;
} else if (e.which) { // Netscape/Firefox/Opera
keynum = e.which;
}
if (keynum == 37) {// when percentage is pressed(%)
//Code for displaying Call Webcontrol (.ascx file)
//Webcontrol contains the datagrid/dropdown list
//Once any option is selected from the Webcontrol datagrid/dropdown list it
gets closed and text copied into text
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2022-06-15 05:23:01
好的，假设有一个文本框，然后按下文本框的键。
<asp:textbox id="txtUsername" runat="server"
onkeypress="return Key_Press(event);" ClientIDMode="Static" Height="125px" Width="485px"/>然后，我们在一个网格视图中-弹出一个酒店列表，(选择一个插入)。
所以，我们有一个：
<div id="MyHotelPick" style="display:none">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="table table-condensed" >
<Columns>
<asp:BoundField DataField="HotelName" HeaderText="Hotel Name" ControlStyle-Width="120px" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:TemplateField HeaderText="Insert" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Button ID="cmdInsert" runat="server" Text="Insert" CssClass="btn"
OnClientClick='<%# "MyInsert(\"" + Eval("HotelName") + "\");return false" %>'
/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>好的，现在我们需要一个对话系统。可以尝试引导，但他们并不是那么友好。但是，假设您使用jQuery，然后添加jQuery.UI，它有一个很好的对话框弹出系统。
因此，我们的脚本(在上面的标记之后)可以是：
<script>
function Key_Press(e)
{
var keynum;
if (window.event) { // IE
keynum = e.keyCode;
} else if (e.which) { // Netscape/Firefox/Opera
keynum = e.which;
}
if (keynum == 37) {// when percentage is pressed(%)
var ctl = document.getElementById('txtUsername');
var startPos = ctl.selectionStart;
endPos = ctl.selectionEnd;
var mydiv = $("#MyHotelPick")
mydiv.dialog({
modal: true, appendTo: "form",
title: "Insert Hotel Name", closeText: "",
position: { my: 'left top', at: 'right bottom', of: ctl },
width: "20%",
buttons: {
Cancel: (function () {
mydiv.dialog("close")
})
}
});
return false // surpress the % key in text
}
return true
}
var endPos = 0
function MyInsert(strHotel) {
tBox = $('#txtUsername')
sText = tBox.val()
sText = sText.slice(0,endPos) + strHotel + sText.slice(endPos)
tBox.val(sText)
var mydiv = $("#MyHotelPick")
mydiv.dialog("close")
}
</script>我们后面的代码来加载网格，这样说：
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
LoadPickList();
}
void LoadPickList()
{
DataTable rstData = General.MyRst("SELECT HotelName, City FROM tblHotelsA ORDER BY HotelName");
GridView1.DataSource = rstData;
GridView1.DataBind();
}好的，现在当我开始输入文本框并点击%时，我得到以下信息：
如果我点击cancel -什么都不会发生，但是，如果我点击了insert，那么我得到了以下信息：
因此，采用一个很好的“对话”例程--比如jQuery.UI --可以让您在div中弹出任何东西--包括您的选择列表。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72611419
复制相关文章
相似问题
腾讯云开发者
