Web开发：如何为TextBox的Autocomplete添加动态数据库值

完全可以实现你想要的功能——让TextBox记住用户提交过的用户名，输入开头字符时自动弹出智能提示。核心思路是存储用户提交的历史值，然后把这些值作为Autocomplete的动态数据源，下面分两种常用场景给你具体实现步骤：

一、先搞定提交后的历史存储 #

不管用哪种Autocomplete方案，第一步都是把用户输入的"myUserName"保存起来。这里以Session为例（适合临时存储当前用户的历史记录），如果要长期保存所有用户的记录，换成数据库即可：

protected void btnSubmit_Click(object sender, EventArgs e)
{
    // 从Session获取已有的用户名列表，没有就新建一个
    var userNames = Session["UserNames"] as List<string> ?? new List<string>();
    var inputName = TextBox1.Text.Trim();
    
    // 避免重复添加相同用户名
    if (!userNames.Contains(inputName))
    {
        userNames.Add(inputName);
        Session["UserNames"] = userNames;
    }
    
    // 这里写你的其他提交逻辑，比如表单提交到后台处理
}

二、实现Autocomplete智能提示 #

方法1：用AjaxControlToolkit（ASP.NET Web Forms常用） #

如果你用的是Web Forms，AjaxControlToolkit的AutoCompleteExtender能快速实现官方风格的提示：

1. 先确保项目引用了AjaxControlToolkit，然后在页面注册控件：

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

2. 给TextBox绑定AutoCompleteExtender：

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
    TargetControlID="TextBox1"          <!-- 绑定目标TextBox -->
    ServiceMethod="GetUserNames"        <!-- 后台提供数据源的方法 -->
    MinimumPrefixLength="1"             <!-- 输入1个字符就触发提示 -->
    CompletionSetCount="10"             <!-- 最多显示10条结果 -->
    EnableCaching="false">              <!-- 禁用缓存，保证实时获取最新历史 -->
</ajaxToolkit:AutoCompleteExtender>

3. 后台写提供数据源的Web方法：

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static List<string> GetUserNames(string prefixText, int count)
{
    // 从Session获取历史用户名
    var userNames = HttpContext.Current.Session["UserNames"] as List<string> ?? new List<string>();
    
    // 返回匹配前缀的用户名（不区分大小写）
    return userNames
        .Where(u => u.StartsWith(prefixText, StringComparison.OrdinalIgnoreCase))
        .Take(count)
        .ToList();
}

方法2：原生JavaScript实现（轻量无依赖） #

如果不想用第三方控件，原生JS+CSS能自定义更灵活的提示样式：

<asp:TextBox ID="TextBox1" runat="server" onkeyup="showAutoComplete(this)"></asp:TextBox>
<!-- 用来显示提示的容器 -->
<div id="autocompleteList" style="border:1px solid #ccc; display:none; position:absolute; background:white; z-index:999;"></div>

<script>
    // 从后台渲染历史用户名数组（也可以用AJAX异步获取）
    var userNames = <%= new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Session["UserNames"] as List<string> ?? new List<string>()) %>;

    function showAutoComplete(input) {
        var prefix = input.value.toLowerCase();
        var list = document.getElementById('autocompleteList');
        list.innerHTML = '';

        // 输入为空时隐藏提示
        if (prefix.length < 1) {
            list.style.display = 'none';
            return;
        }

        // 筛选匹配前缀的用户名
        var matches = userNames.filter(name => name.toLowerCase().startsWith(prefix));
        if (matches.length === 0) {
            list.style.display = 'none';
            return;
        }

        // 生成提示项
        matches.forEach(name => {
            var item = document.createElement('div');
            item.textContent = name;
            item.style.padding = '4px 8px';
            item.style.cursor = 'pointer';
            // 点击提示项填充到TextBox
            item.onclick = function() {
                input.value = name;
                list.style.display = 'none';
            };
            // 鼠标hover样式
            item.onmouseover = () => item.style.backgroundColor = '#f0f0f0';
            item.onmouseout = () => item.style.backgroundColor = 'white';
            list.appendChild(item);
        });

        // 定位提示容器到TextBox下方
        var rect = input.getBoundingClientRect();
        list.style.top = (rect.bottom + window.scrollY) + 'px';
        list.style.left = (rect.left + window.scrollX) + 'px';
        list.style.width = rect.width + 'px';
        list.style.display = 'block';
    }

    // 点击页面其他区域关闭提示
    document.addEventListener('click', function(e) {
        var input = document.getElementById('<%= TextBox1.ClientID %>');
        var list = document.getElementById('autocompleteList');
        if (e.target !== input && !list.contains(e.target)) {
            list.style.display = 'none';
        }
    });
</script>

额外提示 #

• 如果要长期保存所有用户的提交记录，把Session换成数据库（比如SQL Server），在获取数据源的方法里从数据库查询匹配的用户名即可。
• 记得添加输入验证，过滤特殊字符，避免XSS攻击或者非法内容。
• 原生JS方案的样式可以根据你的页面风格自定义，比如修改边框颜色、hover效果等。

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