japan.internet.com翻訳記事

ASP.NETアプリケーションにGoogle Suggest風の機能を追加する

Ajaxを利用して入力候補を自動提示するテキストボックス

2006/02/15 13:00

ポスト

Page 1
Page 2

Webアプリケーションへの追加

　まず、AutoSuggestBoxパッケージをこちらからダウンロードしてください。AutoSuggestBoxを利用するには、次の4つのファイルを自作アプリケーションに追加する必要があります。

ファイル名	説明
AutoSuggestBox.dll	コントロールそのものが含まれています。
AutoSuggestBox.js	AjaxをサポートするJavaScriptのメソッドです。
AutoSuggestBox.css	自動提示メニューの外観です。
GetAutoSuggestBox.aspx	提示する項目が含まれたhtmlを返します。

　まずは「AutoSuggestBox.dll」への参照を追加します。次に、Webアプリケーションのルートの下に「asb-includes」というサブディレクトリを作ります。最後に、このサブディレクトリに残り3つのファイルをコピーします。

　詳細な手順についてはこちらを参照してください。

自動提示メニュー項目を読み込むためにデータの種類を指定する

　まず、ユーザーがAutoSuggestBoxに文字入力を始めたときに提示するメニュー項目のデータソースを用意する必要があります。このシステムでは、データソースを必要な数だけいくつでも使用できます。たとえば、「都市」と「空港」のそれぞれに別々のデータソースが使用することができます。

　データソースを追加するには、「GetAutoSuggestData.aspx」ファイルの変更が必要です。このクラスには、デフォルトで「都市」のデータソースが実装されています。LoadMenuItemsには、次のように、さまざまな種類のデータを読み込むためのswitch文が含まれています。

private ArrayList LoadMenuItems(string sDataType, string sKeyword) 
{
  ArrayList aMenuItems;

  switch(sDataType)
  {
    case "City":
      aMenuItems=LoadCities(sKeyword);
      break;
    default:
      throw new Exception("GetAutoSuggestData Type '"
        + sDataType + "' is not supported.");
  }
  return aMenuItems;
}

　LoadCitiesメソッドは、ユーザーが入力した文字に応じて、自動提示する都市名をデータソースから取得します。次に、ASBMenuItemsの配列を生成し、データベースからの取得結果をそこに格納します。

private ArrayList LoadCities(string sKeyword)
{
  ArrayList aOut=new ArrayList();

  string sConnString="Provider=Microsoft.Jet.OLEDB.4.0;" +
    "Data Source=c:\\databases\\AutoSuggestBox_Demo.mdb;" +
    "User Id=admin;Password=;";
  OleDbConnection oCn=new OleDbConnection(sConnString);

  string sSql="SELECT TOP 10 tblCity.Name as CityName, " +
    "tblCity.Code as CityCode, " +
    "tblCountry.Name as CountryName, " +
    "tblState.Name as StateName " + 
    "FROM (tblCity INNER JOIN tblCountry " +
    "ON tblCity.CountryID=tblCountry.ID) " +
    "  LEFT OUTER JOIN tblState ON tblCity.StateID=tblState.ID " + 
    "WHERE (tblCity.Name LIKE '" +
    sKeyword.Replace("'", "''") + "%') " +
    "ORDER BY tblCity.Name";

  OleDbCommand oCmd = new OleDbCommand(sSql, oCn);
  oCn.Open();

  OleDbDataReader oReader = oCmd.ExecuteReader();

  string sCity;
  string sCityCode;
  string sState;
  string sCountry;

  string sLabel;

  ASBMenuItem oMenuItem;

  while (oReader.Read())
  {
    //Build label using City, Country & State
    sCity     =oReader.GetString(0);
    sCityCode =oReader.GetString(1);
    sCountry  =oReader.GetString(2);

    if (oReader.GetValue(3)==System.DBNull.Value)
      sState="";
    else
      sState=oReader.GetString(3);


    sLabel=sCity;

    //Append either state or country
    if (sState != "")
      sLabel+=", " + sState;
    else
      sLabel+=", " + sCountry;

    oMenuItem=new ASBMenuItem();
    oMenuItem.Label=sLabel;
    oMenuItem.Value=sCityCode;

    aOut.Add(oMenuItem);
  } 

  oReader.Close();
  oCn.Close();

  return aOut;
}

　後から別のデータソースを追加することになっても、LoadMenuItems関数のcase文を増やすだけで済みます。

AutoSuggestBoxコントロールをWebフォームに挿入する

Webフォームを新規に作成するか、既存のフォームを開きます。
aspxページの一番上に次の行を追加します。

<%@ Register TagPrefix="Custom" Namespace="ASB"
             Assembly="AutoSuggestBox" %>

提示ボックスを表示したい場所に次の形式で行を追加します。

<Custom:AutoSuggestBox id="Control ID" runat="server"
    DataType="サポートするデータの種類"
    CssClass="テキストボックスのスタイル"
    MaxLength="テキストボックスの最大文字数"
    Columns="表示する文字数"
/>

たとえば、次のようになります。

<Custom:AutoSuggestBox id="asbCity" runat="server"
    DataType="City"
    CssClass="FormCtrlStyle"
    MaxLength="100"
    Columns="30"
/>

DataType属性の値が「GetAutoSuggestData.aspx.cs」になっていることを確認します。詳細は前のセクションをご覧ください。
WebアプリケーションをWebサーバーのルート（たとえば、http://localhost/WebApp）で実行しない場合は、次のようにAutoSuggestBoxタグにもう1つ属性を追加します。

<Custom:AutoSuggestBox id="asbCity" runat="server"
    DataType="City"
    CssClass="FormCtrlStyle"
    MaxLength="100"
    Columns="30"
    ResourcesDir="/WebApp/AutoSuggestBox"
/>

注意

　ResourcesDirのデフォルト値は「/asb_includes」です。

動作のしくみ

　このコントロールにユーザーが文字の入力を始めると、JavaScriptによってOnKeyUp、OnKeyDown、OnKeyPressの各イベントが処理されます。また、Ajaxによって、サーバ側との通信が行われ、クリックごとに提示エントリの一覧が取得されます。

　つまり、イベントの流れは次のようになります。

AutoSuggestBoxコントロールにフォーカスが存在する状態で、ユーザーがキーを押します。
JavaScriptによって、ユーザーが［Up］、［Down］、［Enter］、またはその他のキーを押したかどうかが確認されます。
提示メニューが表示されていて、ユーザーが［Up］または［Down］キーを押した場合は、適切なメニュー項目が選択状態になります。
ユーザーが［Enter］キーを押すと、提示メニューが非表示になり、現在の選択項目が提示ボックスに表示されます。
ユーザーが英数字を入力すると、JavaScriptによってサーバの「GetAutoSuggestData.aspx」ページにXmlHttpRequestが送信されます。
「GetAutoSuggestData.aspx」ページはテキストボックスの現在値と取得すべきデータの種類を受けとります。通常は、提示する値をデータベースから取得するためのクエリが生成されます。クエリ結果を用いて提示メニュー用のHTMLが作成され、「GetAutoSuggestData.aspx」ページに返されます。
このWebページが更新後の提示メニューを取得し、古いメニューに代わって新しいメニューを表示します。