iPentec.com  /  Doc  /  C#  /  ASP.NET  /  オートコンプリート

目次

AutoCompleteExtender を用いてテキストボックスのオートコンプリートを実装する - ASP.NET

Ajax Control ToolkitのAutoCompleteExtender を用いてテキストボックスにオートコンプリート機能を実装する手順を紹介します。

事前準備

Ajax Control Toolkitの導入

「Ajax Control Toolkit のインストール (Visual Studioの使い方 Tips)」を参照して、Ajax Control Toolkitをダウンロードし、インストールします。

データベースサーバーの導入

オートコンプリートされるデータを格納するためのデータベースサーバーを準備します。今回はSQL Serverを準備しました。

テーブルの作成とデータの追加

データベースのテーブルにデータを追加します。

"Microsoft SQL Server Management Studio"を起動し、データベースサーバーに接続します。データベースを選択し[テーブル]ノードを選択します。右クリックし、ポップアップメニューを表示します。[新規作成]メニューの[テーブル]を選択します。


テーブルデザイナが表示されます。


int型の"id"とnchar型の"itemtext"列を追加します。idは主キー、IDENTITYを設定します。


テーブルに名前を付けて保存します。テーブル名は"AutoCompleteDemoItem"としました。


テーブルが追加されたことを確認します。


テーブルを選択し、右クリックのポップアップメニューの[上位200行の編集]を選択し、テーブルにデータを追加します。


今回は下図のデータを追加しました。

実装手順

コンプリート要素を返すWebサービスの実装

ASP.NET Webアプリケーションの空のプロジェクトを作成します。作成後、[新しい項目の追加]で[Web サービス (ASMX)]を追加します。


ファイル名は"AutoCompleteDemoWebService.asmx"としました。asmxファイルが追加されました。

asmxに以下のコードを記述します。
AutoCompleteDemoWebService.asmx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data.SqlClient;

namespace AutoCompleteDemo
{
  /// <summary>
  /// AutoCompleteDemoWebService の概要の説明です
  /// </summary>
  [WebService(Namespace = "http://tempuri.org/")]
  [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
  [System.ComponentModel.ToolboxItem(false)]
  // この Web サービスを、スクリプトから ASP.NET AJAX を使用して呼び出せるようにするには、次の行のコメントを解除します。
  [System.Web.Script.Services.ScriptService]
  public class AutoCompleteDemoWebService : System.Web.Services.WebService
  {
    string ConnectionString = "Data Source=192.168.64.97;Initial Catalog=iPentecSandBox;Connect Timeout=60;Persist Security Info=True;User ID=sa;Password=adelieC#8851SQL";

    [WebMethod]
    public string HelloWorld()
    {
      return "Hello World";
    }

    [WebMethod()]
    public String[] GetAutoCompleteList(String prefixText, int count)
    {
      List<String> list = new List<String>();
      SqlConnection con = new SqlConnection(ConnectionString);
      con.Open();
      try {
        SqlCommand com = new SqlCommand("select top(@cnt) * from AutoCompleteDemoItem where itemtext like @query",con);
        SqlParameter param = new SqlParameter();
        param.ParameterName = "@query";
        param.Value = prefixText + "%";
        com.Parameters.Add(param);
        
        SqlParameter param2 = new SqlParameter();
        param2.ParameterName = "@cnt";
        param2.Value = count;
        com.Parameters.Add(param2);

        SqlDataReader sdr = com.ExecuteReader();
        while (sdr.Read() == true) {
          list.Add(((string)sdr["itemtext"]).Trim());
        }
      }
      finally {
        con.Close();
      }

      return list.ToArray();
    }
  }
}

解説

asmxファイルを作成した直後のデフォルトの状態では、"[System.Web.Script.Services.ScriptService]" がコメントアウトされていますので、コメントアウトを外します。
"GetAutoCompleteList"Webメソッドでは、与えられたプレフィックスとcountから、データベースを検索し、コンプリート要素の候補を与えられた個数返します。

Webフォームの実装

続いて、[新しい項目の追加]で[Web フォーム]を追加します。


"ToolkitScriptManager","TextBox","AutoCompleteExpander"をWebフォームに配置します。


AutoCompleteExpanderのプロパティを設定します。ServiceMethodにWebサービスで呼び出すメソッド名を入力します。今回は"AutoCompleteDemoWebService.asmx"において"GetAutoCompleteList"メソッドを作成してあるので、ServiceMethodプロパティには"GetAutoCompleteList"を入力します。"ServicePath"プロパティには呼び出すWebサービス名を指定します。今回は"AutoCompleteDemoWebService.asmx"とします。


AutoCompleteExpanderの"TargetControl"にテキストボックスのIDを指定します。今回の場合は"textBox1"を入力します。


"TargetControl"プロパティの値が反映されると、AutoCompleteExpanderの表示は非表示になります。

タスクメニューによる、エクステンダーの追加方法

先に紹介した手順ではツールボックスからAutoCompleteExtenderをフォームにドラッグ＆ドロップして追加しましたが、Visual Studio 2013ではタスクメニューでエクスパンダ-の追加ができます。
テキストボックスを選択し、テキストボックス右側の[>]ボタンをクリックします。下図の[TextBox タスク]メニューが表示されます。メニュー内の[エクステンダーの追加]をクリックします。


エクステンダーウィザードダイアログが表示されます。一覧から[AutoCompleteExtender]を選択します。選択後[OK]ボタンを栗くします。


上記手順でAutoCompleteExtenderを追加することもできます。

コード

aspxファイルのコードは以下になります。

default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="AutoCompleteDemo._default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <style type="text/css">
  <!--
    .AutoExtender
    {
       font-family: Verdana, Helvetica, sans-serif; 
       font-size: .8em;
       margin : 0px !important;
       font-weight: normal; 
       border:solid 1px #006699;
       line-height:20px;
       padding:0px;
       background-color:White;
    }
   -->
  </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
      <asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" ServiceMethod="GetAutoCompleteList" ServicePath="AutoCompleteDemoWebService.asmx"  CompletionListCssClass="AutoExtender" TargetControlID="textBox1"></asp:AutoCompleteExtender>
    </div>
    </form>
</body>
</html>

解説

  <style type="text/css">
  <!--
    .AutoExtender
    {
       font-family: Verdana, Helvetica, sans-serif; 
       font-size: .8em;
       margin : 0px !important;
       font-weight: normal; 
       border:solid 1px #006699;
       line-height:20px;
       padding:0px;
       background-color:White;
    }
   -->
  </style>
上記は、保管候補のポップアップ領域のスタイルを設定するCSSです。上記のCSSがない場合は、新しいバージョンのInternetExplorerでポップアップ領域がテキストボックスの直下に表示されず、ずれる問題が発生します。

default.aspx.cs

Webフォームのロジック部部分のコードです。こちらは追加でのコード記述は必要ありません。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace AutoCompleteDemo
{
  public partial class _default : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {

    }
  }
}

実行結果

プロジェクトを実行します。下図のウィンドウが表示されます。


テキストボックスにテキストを入力します。入力後1秒ほど経過するとポップアップで候補の枠がテキストボックスの下部に表示されます。


ポップアップされた候補をクリックすると、テキストボックスの入力内容に反映されます。


別の語句を入力した場合は、ポップアップの候補の内容も変わります。

複数候補のある場合

データベースのデータを下図に変更しました。


プロジェクトを実行し"Pen"を入力します。複数の候補があるため、下図の結果が表示されます。


著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

関連するページ

最終更新日: 2024-01-06
作成日: 2014-06-10
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
コンテンツ
YouTube
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.