WebSurfer's Home

トップ > Blog 1   |   Login
Filter by APML

ACT の AutoComplete

by WebSurfer 14. April 2012 15:48

AJAX Control Toolkit (ACT) の AutoComplete を使ってみました。

AJAX Control Toolkit の 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();
  }    
}

Tags: , ,

AJAX

About this blog

2010年5月にこのブログを立ち上げました。その後 ブログ2 を追加し、ここは ASP.NET 関係のトピックス、ブログ2はそれ以外のトピックスに分けました。

Calendar

<<  June 2021  >>
MoTuWeThFrSaSu
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011

View posts in large calendar