by WebSurfer
2012年4月14日 15:48
AJAX Control Toolkit (ACT) の AutoComplete を使ってみました。
実装は特に難しいことはなく、アットマーク・アイティの AutoComplete コントロールで Google サジェスト風なオートコンプリート機能を実装するには？ を参考にすれば機能的には問題なく動くと思います。
ただし、スタイルを何も設定しないと、TextBox と候補リスト（AutoCompleteExtender が生成する ul, li 要素を使ったリスト）の間にスペースができてしまいます。理由は、ul 要素の Margin のトップが何故か 40px になっているからです。（IE9 の開発者ツールで「レイアウト」を見ると分かります）
スペースのできるのが気に入らない場合は、CompletionListCssClass プロパティに自分でスタイルを定義する必要があります。以下に、その例を書いておきます。
Web Form（.aspx)
CompletionListCssClass プロパティに設定するスタイルは、margin: 0px !important; とするだけではダメで、以下のように他の要素も定義しなおす必要があります。
下の例で、CompletionListItemCssClass と CompletionListHighlightedItemCssClass も設定してありますが、TextBox と候補リストの間のスペースの調整には必要ないです（オマケです）。
<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.autocomplete
{
margin: 0px !important;
padding: 0px !important;
text-align: left;
color: WindowText;
overflow: auto;
border-color: ButtonShadow;
border-width: 1px;
border-style: solid;
list-style-type: none;
background-color: inherit;
height: 200px;
}
.autocomplete_item
{
color: WindowText;
background-color: Window;
padding: 1px;
}
.autocomplete_highlightedItem
{
color: Black;
background-color: rgb(255, 255, 153);
padding: 1px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager
ID="ToolkitScriptManager1"
runat="server">
</ajaxToolkit:ToolkitScriptManager>
<asp:TextBox ID="TextBox1"
runat="server" Columns="50">
</asp:TextBox>
<ajaxToolkit:AutoCompleteExtender
ID="TextBox1_AutoCompleteExtender"
runat="server"
MinimumPrefixLength="2"
ServicePath="~/142-ACTAutoComplete.asmx"
TargetControlID="TextBox1"
ServiceMethod="GetList"
CompletionSetCount="20"
CompletionListCssClass="autocomplete"
CompletionListItemCssClass="autocomplete_item"
CompletionListHighlightedItemCssClass=
"autocomplete_highlightedItem">
</ajaxToolkit:AutoCompleteExtender>
</form>
</body>
</html>
Web サービス（.asmx)
Web サービスは、クライアントスクリプトから呼び出して、JSON 形式のデータを返すように、クラスに ScriptService 属性を追加するところがポイントです。
以下の例で、データベースは Microsoft が無償で提供している Northwind サンプルデータベースの Products テーブルを使用しています。
<%@ WebService Language="C#" Class="_142_ACTAutoComplete" %>
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Collections.Generic;
using System.Web.Configuration;
using System.Data;
using System.Data.SqlClient;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class _142_ACTAutoComplete : WebService
{
[WebMethod]
public string[] GetList(string prefixText, int count)
{
List<string> list = new List<string>();
string connString =
WebConfigurationManager.
ConnectionStrings["Northwind"].ConnectionString;
string query =
String.Format(
"SELECT TOP {0} ProductName FROM Products " +
"WHERE ProductName LIKE @ProductName", count);
SqlConnection connection = new SqlConnection(connString);
SqlCommand command = new SqlCommand(query, connection);
SqlParameter param =
new SqlParameter("@ProductName", SqlDbType.NVarChar, 40);
param.Value = "%" + prefixText + "%";
command.Parameters.Add(param);
try
{
connection.Open();
SqlDataReader reader = command.ExecuteReader();
while (reader.Read())
{
list.Add(reader.GetString(0));
}
}
finally
{
connection.Close();
}
return list.ToArray();
}
}