2

私は友人のために小さなプロジェクトをやっています。どんな助けでもよろしくお願いします。

テキストボックスがありますが、html入力コントロールを使用することもできます。

文字aと一致する説明を返す文字aを入力できるグーグルバーと同じアイデア。グーグル検索バーと同じように、inutコントロールの下に一致する値が表示されます。

このコード例C＃を実行する方法についてのアイデアは、ありがたいです。

4

1 に答える 1

3

jQueryとHTTPハンドラーを使用できます

  1. jQueryをダウンロードします（まだお持ちでない場合）
  2. autocomplete.jsをダウンロード
  3. jquery.autocomplete.cssをダウンロードします
  4. ファイルをプロジェクトにコピーします。私のものは、スクリプトとスタイルと呼ばれるサブフォルダーにあります。

SQL：

例として、SearchIdとSearchの2つの列を持つ1つのテーブルを持ち、ダミーの検索データを格納する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;}
        }
    }
}

出力：

ここに画像の説明を入力してください

プロジェクトのzipバージョンをGoogleドライブに配置しました。これがお役に立てば幸いです。

于 2013-01-19T19:01:08.700 に答える