求VB.NET实现输入框实时从数据库获取自动提示的实用示例

当然可以！结合你已经掌握的数据库查询和Repeater知识，我给你两个实用的实现方案，都是VB.NET Web Forms场景下的：

方案1：使用AJAX Control Toolkit的AutoCompleteExtender #

这个方案上手快，不需要写太多JS，适合快速实现需求：

步骤1：添加AJAX Control Toolkit引用 #

如果你还没装这个控件包，可以通过NuGet搜索AJAX Control Toolkit安装，或者手动添加dll引用。

步骤2：前台ASPX代码 #

在页面里添加ScriptManager、输入框和自动提示扩展控件：

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>

<!-- 你的城市输入框 -->
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox>

<!-- 自动提示扩展控件 -->
<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
    TargetControlID="txtCity"
    ServiceMethod="GetMatchingCities"
    MinimumPrefixLength="1" <!-- 用户输入1个字符就触发查询 -->
    CompletionInterval="300" <!-- 300毫秒延迟，避免频繁请求数据库 -->
    CompletionListCssClass="autocomplete-list" <!-- 自定义提示列表样式 -->
    CompletionListItemCssClass="autocomplete-item"
    CompletionListHighlightedItemCssClass="autocomplete-highlight">
</ajaxToolkit:AutoCompleteExtender>

步骤3：后台VB.NET代码（编写Web方法） #

在页面的Code-Behind里写一个静态Web方法，用来从数据库查询匹配的城市：

Imports System.Web.Services
Imports System.Data.SqlClient
Imports System.Configuration

Public Class CitySearchPage
    Inherits System.Web.UI.Page

    <WebMethod()>
    Public Shared Function GetMatchingCities(prefixText As String, count As Integer) As String()
        Dim cityList As New List(Of String)()
        Dim connStr As String = ConfigurationManager.ConnectionStrings("YourDatabaseConn").ConnectionString

        ' 用参数化查询避免SQL注入，一定要注意！
        Dim sql As String = "SELECT CityName FROM CityTable WHERE CityName LIKE '%' + @Prefix + '%' ORDER BY CityName"

        Using conn As New SqlConnection(connStr)
            Using cmd As New SqlCommand(sql, conn)
                cmd.Parameters.AddWithValue("@Prefix", prefixText)
                conn.Open()
                Using reader As SqlDataReader = cmd.ExecuteReader()
                    While reader.Read()
                        cityList.Add(reader("CityName").ToString())
                    End While
                End Using
            End Using
        End Using

        Return cityList.ToArray()
    End Function
End Class

补充：自定义样式（可选） #

给提示列表加些CSS让它更美观：

.autocomplete-list {
    border: 1px solid #ddd;
    background: #fff;
    max-height: 220px;
    overflow-y: auto;
    margin-top: 4px;
}
.autocomplete-item {
    padding: 8px 12px;
    cursor: pointer;
}
.autocomplete-highlight {
    background-color: #f5f5f5;
}

方案2：纯JavaScript + 后台一般处理程序（更灵活） #

如果不想依赖第三方控件，这个方案更轻量，方便自定义交互逻辑：

步骤1：前台ASPX代码 #

添加输入框和提示列表容器，配合JS实现交互：

<asp:TextBox ID="txtCity" runat="server" ClientIDMode="Static"></asp:TextBox>
<!-- 用来展示提示的容器 -->
<div id="suggestionContainer" class="autocomplete-list"></div>

<script>
    const inputBox = document.getElementById('txtCity');
    const suggestionBox = document.getElementById('suggestionContainer');
    let requestTimeout;

    // 监听输入事件，加延迟避免频繁请求
    inputBox.addEventListener('input', function() {
        clearTimeout(requestTimeout);
        const keyword = this.value.trim();
        
        if (keyword.length < 1) {
            suggestionBox.innerHTML = '';
            return;
        }

        requestTimeout = setTimeout(() => {
            // 向后台处理程序发请求
            fetch(`CitySuggestHandler.ashx?keyword=${encodeURIComponent(keyword)}`)
                .then(res => res.json())
                .then(data => {
                    // 渲染提示项
                    let html = '';
                    data.forEach(city => {
                        html += `<div class="autocomplete-item" onclick="fillCity('${city}')">${city}</div>`;
                    });
                    suggestionBox.innerHTML = html;
                })
                .catch(err => console.log('请求出错:', err));
        }, 300);
    });

    // 选择城市后填充输入框并隐藏提示
    function fillCity(cityName) {
        inputBox.value = cityName;
        suggestionBox.innerHTML = '';
    }

    // 点击页面其他区域隐藏提示列表
    document.addEventListener('click', e => {
        if (!inputBox.contains(e.target) && !suggestionBox.contains(e.target)) {
            suggestionBox.innerHTML = '';
        }
    });
</script>

步骤2：创建一般处理程序（.ashx） #

添加一个名为CitySuggestHandler.ashx的文件，用来处理AJAX请求并返回JSON数据：

Imports System.Web
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Web.Script.Serialization

Public Class CitySuggestHandler
    Implements IHttpHandler

    Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        context.Response.ContentType = "application/json"
        Dim keyword As String = context.Request.QueryString("keyword")

        If String.IsNullOrEmpty(keyword) Then
            context.Response.Write("[]")
            Return
        End If

        Dim cityList As New List(Of String)()
        Dim connStr As String = ConfigurationManager.ConnectionStrings("YourDatabaseConn").ConnectionString
        Dim sql As String = "SELECT CityName FROM CityTable WHERE CityName LIKE '%' + @Keyword + '%' ORDER BY CityName"

        Using conn As New SqlConnection(connStr)
            Using cmd As New SqlCommand(sql, conn)
                cmd.Parameters.AddWithValue("@Keyword", keyword)
                conn.Open()
                Using reader As SqlDataReader = cmd.ExecuteReader()
                    While reader.Read()
                        cityList.Add(reader("CityName").ToString())
                    End While
                End Using
            End Using
        End Using

        ' 把列表序列化为JSON返回
        Dim serializer As New JavaScriptSerializer()
        context.Response.Write(serializer.Serialize(cityList))
    End Sub

    ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property

End Class

重要注意事项 #

• 替换代码里的YourDatabaseConn为你实际的数据库连接字符串（在Web.config里配置）
• 两个方案都用了参数化查询，一定要避免直接拼接SQL语句，防止SQL注入攻击
• 如果你的城市数据量很大，可以给CityName字段加索引，提升查询效率

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