Question

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

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

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

任何想法如何做这个代码示例C＃都会非常感谢你。

Answer 1

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

下载jQuery（如果您还没有）
下载autocomplete.js
下载jquery.autocomplete.css
将文件复制到项目中.Mine位于名为Scripts and 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;}
        }
    }
}

<强>输出：

enter image description here

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

如何在文本框或输入控件中填充sql查询结果，如谷歌搜索下拉结果

1 个答案: