ASP.NET文本框输入%等特殊字符时如何弹出下拉选单完成选值填充

我是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) {// 注释标注为按下%时触发
        //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
    }
}

首先纠正你现有代码的基础错误：键值37对应的是键盘左方向键，并非%字符，直接判断输入的字符内容比硬记keyCode兼容性更好，也不容易出错。
具体实现不要走动态加载.ascx控件的思路，这类即时触发的浮层交互用前端逻辑+异步请求实现体验更好，不会触发整页回发，落地步骤如下：

• 提前在页面中写好浮层容器，用普通div实现即可，内部可以按需求渲染网格、列表、下拉选项结构，初始给容器加display: none样式设为隐藏，定位属性设为absolute方便后续跟随文本框定位
• 把文本框上老旧的onkeypress事件换成input事件监听，检测到输入的最新字符是%时，获取文本框在页面中的坐标，把浮层容器定位到文本框下方相邻位置，设置为显示状态；如果选项数据需要从服务端读取，此时发异步请求拉取数据填充到浮层里即可，不需要加载整段ascx控件
• 给浮层内每个可选项绑定点击事件：触发时拿到选项对应的文本内容，追加到文本框的现有值末尾，之后直接把浮层设为隐藏
• 补充关闭逻辑：监听页面全局点击事件，如果点击的位置既不在文本框内、也不在浮层容器内，直接隐藏浮层，和常规下拉组件的交互逻辑保持一致

内容的提问来源于stack exchange，提问作者DevOpS_PRO_Pro