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();
}
}
by WebSurfer
2011年7月23日 14:09
IE にはオートコンプリートという機能があって、TextBox に前回入力した文字列を入力中に補完してくれます(Firefox など他のブラウザにも同等の機能がありますが、今回は IE に限った話です)。
TextBox に入力した文字列が IE のオートコンプリートに登録される条件は、その TextBox が form の中にあって、form が submit タイプのボタン(例: <input type="submit" ... )のクリックで submit されることです。
button タイプのボタン(例: <input type="button" ... )の onclick 属性にスクリプトを設定して、そのスクリプトで form を submit しても、オートコンプリートには登録されません。
詳しくは、マイクロソフトサポートオンラインのページ BUG: AutoComplete Does Not Work When You Use Script to Submit a Form を参照してください。
ただし、上記のページにも出ていますが、AutoCompleteSaveForm Method を利用すると、submit せずにオートコンプリートに登録することができます。
具体的なコード例は以下の通りです。(上記の AutoCompleteSaveForm Method のコードを ASP.NET の TextBox を使って書き換えただけです)
なお、AutoCompleteSaveForm メソッドは IE5 以降のバージョン専用だそうですので注意してください。もちろん、Firefox, Chrome などでは動きません。
<%@ Page Language="C#" %>
<!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>
<script type="text/javascript">
//<![CDATA[
function fnSaveForm() {
window.external.AutoCompleteSaveForm(form1);
document.getElementById("AutoCompleteTest").value = "";
document.getElementById("AutoCompleteIgnore").value = "";
}
//]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
This text is saved:
<asp:TextBox ID="AutoCompleteTest"
runat="server">
</asp:TextBox>
<br />
This text is not saved:
<asp:TextBox ID="AutoCompleteIgnore"
runat="server"
AutoCompleteType="Disabled">
</asp:TextBox>
<br />
<input id="Button1"
type="button"
value="Save Value"
onclick="fnSaveForm()" />
</div>
</form>
</body>
</html>