オートコンプリータのカスタマイズ
既に見たように、Ajax.Autocompleterコンストラクタは4つのパラメータを受け取ります。4番目のパラメータは、オートコンプリータのカスタマイズに使用する任意指定のリテラルオブジェクトです。このオブジェクトのプロパティのうちで最もよく使われるものを表1に示します。
| オプション | 説明 |
| paramName | サーバーに送信されるパラメータに使用する名前を表します。デフォルトはテキストボックス名で、ユーザーが入力した文字列がその値となります。 |
| frequency | ユーザーが最後の文字を挿入してから要求をサーバーに送信するまでの時間を表します。デフォルトは0.4秒です。 |
| minChars | 検索を開始するまでの文字数を表します。デフォルトは1です。 |
| parameters | サーバーに送信する追加のパラメータのために使用します。これらのパラメータはクエリ文字列形式でなければなりません （例： param1=value1¶m2=value2...）。 |
| indicator | データ取得時に表示するHTML要素（一般にはデータロードを示すGIF）のIDです。 |
| updateElement | ユーザーがリストからオプションを選択したときに呼び出すコールバック関数です。デフォルトの関数は選択されたアイテムをテキストボックスに挿入します。 |
| afterUpdateElement | updateElementの呼び出し後に呼び出すコールバック関数です。デフォルトで定義されている関数はありません。 |
次のコード例では表1のオプションをいくつか使用しています。このコードで作成するオートコンプリータは、ユーザーが少なくとも2文字を挿入し、最後の文字を入力してから0.5秒が経過したところで要求をサーバーに送信します。
new Ajax.Autocompleter( 'autoCompleteTextField', 'autoCompleteMenu', 'countries-list.php', { minChars: 2, frequency : 0.5, indicator : "loadingGif", afterUpdateElement : function(){alert($F("autoCompleteTextField"));}, } );
さらに、このコードでは「loadingGif」をIDとするHTML要素を表示し、ユーザーがリストからアイテムを選択すると、そのアイテムを示す警告ボックスを表示します。このコードを、本稿のダウンロードサンプルに収録されている「ajax-autocomplete-options.htm」ファイルと組み合わせて使ってみてください。
表1のオプションはローカルオートコンプリータでも使用できます（ただし、parametersなど一部のオプションはローカルでは意味を持ちません）。
ローカルオートコンプリータの使用
Script.aculo.usでは、Ajaxベースのオートコンプリータに加えて、ローカルオートコンプリータも使用できます。ところで、ローカルオートコンプリータとは何でしょうか。基本的に、データがサーバーではなくてローカルなJavaScript配列内に格納されているオートコンプリータのことです。次の例はローカルオートコンプリータの作成方法を示しています。
new Autocompleter.Local(
'autoCompleteTextField',
'autoCompleteMenu',
COUNTRY_LIST,
{
minChars: 2
}
);
ご覧のように、Ajaxベースのオートコンプリータとよく似ていますが、3番目のパラメータがサーバーサイドコンポーネントのURLではなく、JavaScript配列になっています（本稿のダウンロードサンプルの「local-autocomplete.htm」ファイルに完全な例があります）。ローカルオートコンプリータのカスタマイズに使用できるオプションを表2に示します（表1に示したオプションも使用できます）。
| オプション | 説明 |
| choices | リスト内に表示するアイテム数の上限を表します。デフォルトは10です。 |
| partialChars | partialSearchに関係するオプションで、何文字入力されたら部分一致を試みるかを示します。 |
| partialSearch | 部分検索が有効かどうかを示すブール値です。trueの場合は各語の先頭で一致がチェックされます。デフォルトはtrueです。 |
| fullSearch | 語の先頭および内部で一致をチェックするかどうかを示す値で、trueの場合にこのチェックが行われます。例えば「mil」を検索すると、「Mil」も「Hamilton」も一致することになります。 |
| ignoreCase | 検索で大文字と小文字を区別するかどうかを示すブール値です。デフォルトはtrueです。 |
カスタムオートコンプリータの実装
既に述べたように、Ajaxベースのオートコンプリータの問題点は、サーバー応答として順序なしリスト<ul>を想定していることです。この節では、どんなタイプの応答でも処理できるオートコンプリータの実装方法を具体例で示すことにします。この例では、サーバー応答をリスト更新用のScript.aculo.us関数に渡す前にインターセプトし、オートコンプリータのコンストラクタ呼び出し時にパラメータで定義したコールバック関数へと渡します。
クライアントコードでこのコールバック関数を実装するわけですが、この関数ではXMLやJSON、あるいはその他の形式の応答を解析し<ul>ブロックを組み立てて、それをScript.aculo.usのupdateChoices関数に渡します（この関数によってリストが更新されます）。このオートコンプリータをAjax.Autocompleter.Customと呼ぶことにします。実装は次のとおりです。
Ajax.Autocompleter.Custom = Class.create(Ajax.Autocompleter, {
initialize: function(element, update, url, options) {
this.baseInitialize(element, update, options);
this.options.asynchronous = true;
this.options.onComplete = this.onComplete.bind(this);
this.options.defaultParams = this.options.parameters || null;
this.url = url;
this.options.responseProcessor =
this.options.responseProcessor || Prototype.K;
},
onComplete: function(request) {
var htmlUL =
this.options.responseProcessor(request.responseText,
this.element);
if(htmlUL)
{
this.updateChoices(htmlUL);
}
}
});
デフォルトのAjax.Autocompleter実装に関して変更した部分は、responseProcessorという追加的なパラメータの定義とonCompleteの再定義だけです。responseProcessorパラメータは、次の2つのパラメータを受け取るコールバック関数でなければなりません。
- サーバー応答
- オートコンプリータが関連付けられる要素（コールバック関数の中でこのパラメータを頻繁に使用することはありません）
onCompleteを再定義したのは、updateChoicesの呼び出しをインターセプトすることにより、クライアントコードで定義したコールバック関数がサーバー応答を処理して、updateChoicesで期待される適切な文字列を用意できるようにするためです。この新しいオートコンプリータの使用例をリスト3に示します（本稿のダウンロードサンプルに完全なコードが収録されています）。
function jsonResponseProcessor(respText, elem) { var countries = eval(respText); var ret = "<ul>"; for(var i = 0; i < countries.length; ++i) { ret += "<li>" + countries[i] + "</li>"; } ret += "</ul>"; return ret; } function buildAutocompleter() { new Ajax.Autocompleter.Custom( 'autoCompleteTextField', 'autoCompleteMenu', 'countries-list-json.php', { responseProcessor : jsonResponseProcessor } ); }
ご覧のように、カスタムオートコンプリータを使用するのは簡単です。クラスのインスタンスを作成し、パラメータを利用してコールバック関数を渡します。今回の例では、JSON応答形式を処理するjsonResponseProcessorというコールバック関数を使用しています。同じようにしてXML応答を解析するコールバック関数も簡単に実装できます。応答プロセッサをどのように定義するかは開発者の自由です。コールバック関数の出力は<ul>ブロックを表す文字列である必要がありますが、その他の部分は自由に実装してかまいません。
