2

我正在为朋友做一个小项目，任何帮助都会非常感谢您。

我有一个文本框，但我也可以使用 html 输入控件。

与 google bar 的想法相同，您可以在其中键入字母 a，这将返回与字母 a 匹配的任何描述。它会在 inut 控件下方显示匹配值，与 goodle 搜索栏相同。

任何关于如何执行此代码示例 C# 的想法都非常感谢。

4

1 回答 1

3

您可以使用 jQuery 和 HTTP 处理程序

  1. 下载jQuery（如果你还没有）
  2. 下载autocomplete.js
  3. 下载jquery.autocomplete.css
  4. 将文件复制到您的项目中。我的位于名为 Scripts 和 Style 的子文件夹中

SQL：

为了举例，我创建了一个名为 Search 的本地数据库，它有一个包含两列 SearchId 和 Search 的表来存储一些虚拟搜索数据

ASPX：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Auto complete</title>
    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <link href="Style/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery.autocomplete.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#txtSearch").autocomplete("Autocomplete.ashx");
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="txtSearch" type="text" />
    </div>
    </form>
</body>
</html>

Autocomplete.ashx 处理程序：

using System;
using System.Data.SqlClient;
using System.Web;

namespace WebApplication17
{
    public class Autocomplete : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            string connectionString = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["connection"].ConnectionString;
            string input = context.Request.QueryString["q"];
            string query = "SELECT TOP 10 Search FROM Search WHERE Search LIKE '" + input + "%'";

            using (var conn = new SqlConnection(connectionString))
            {
                using (var command = new SqlCommand(query,conn))
                {
                    conn.Open();
                    using (SqlDataReader reader = command.ExecuteReader())
                    {
                        while (reader.Read())
                            context.Response.Write(reader.GetString(0) + Environment.NewLine);
                    }
                }
            }
        }

        public bool IsReusable
        {
            get{return false;}
        }
    }
}

输出：

在此处输入图像描述

我已将项目的压缩版本放在Google Drive上。希望这会有所帮助！

于 2013-01-19T19:01:08.700 回答