つゆだくのJavaScript・スタイルシ
ート
≪メニュー≫
トップページAutoComplete(テキストボックスで入力候補がでてくるやつ)を行うためのライブラリーです。AutoCompleteを行うために引っ張ってくるデータは、文字列の配列，Function，XHR(XMLHttpRequest)が利用できるようになっていて、さらにXHRはXML，JSON，CSVなどのテキストデータに対応しています。
たとえば、GoogleサジェストやInfoseekの辞書などの入力補完機能を簡単に実装することができるようになります。
詳しくはhttp://developer.yahoo.com/yui/autocomplete/のオリジナルを読まれるのがよいと思います。
必要なのは5つのファイルです。もちろんインストールは済ませておく必要があります。
<script type="text/javascript" src="your install path/yahoo-min.js"></script> <script type="text/javascript" src="your install path/dom-min.js"></script> <script type="text/javascript" src="your install path/event-min.js"></script> <script type="text/javascript" src="your install path/connection-min.js"></script> <script type="text/javascript" src="your install path/autocomplete-min.js"></script>
一番簡単そうな配列を使ったAutoCompleteをやってみます。とくに細かい設定は行わず、とりあえず一番簡単な例です。
まず２つの要素を用意します。
入力ボックス <input id="input1" type="text"/> AutoCompleteの表示場所 <div id="suggest1"></div>
次に以下のJavaScriptを書きます。
<script type="text/javascript">
var a = ["aaa", "abc", "abcdefg"];
var arrayDS = new YAHOO.widget.DS_JSArray(a);
var autoCmp = new YAHOO.widget.AutoComplete(
"input1", "suggest1", arrayDS);
</script>
この数行を書いただけなのに、下の入力ボックスで'a'を入力すると["aaa", "abc", "abcdefg"]にマッチして結果が出力されるのがわかると思います
基本的にはDS_JSArrayと同じですが、文字列の配列を返す関数をデータソースとして指定します。
<script type="text/javascript">
var f = function() {
return ["aaa", "abc", "abcdefg"];
}
var funcDS = new YAHOO.widget.DS_JSFunction(f);
var autoCmp2 = new YAHOO.widget.AutoComplete(
"input2", "suggest2", funcDS);
</script>
これで、'a'を入力すればAutoCompleteされるはずなのですが、IE6でもfirefox1.5でも正しく動作してくれません。。私の使い方が悪いのでしょうか。ソースを追いかける気力がなかったので、そのうち調べたいと思いつつあまりJSFunctionのニーズはないのかなということでほっときます。
Webサービスを使ってAutoCompleteを行うためのデータソースです。JSON, XML, FLAT(カンマ区切りやタブ区切りのデータ)の３つのタイプを指定できますが、ここではXMLフォーマットを試してみます。
下のように書くと /cgi-bin/proxy-yahoo.cgi?query=XXXX にリクエストを投げます(パラメータ名'query' は変更可能)。戻ってくるXMLのサンプルはhttp://api.search.yahoo.co.jp/WebSearchService/V1/webSearch?appid=YahooDemo&query=%e6%b2%96%e7%b8%84&results=2をごらんください。
<script type="text/javascript">
var xml = "/cgi-bin/proxy-yahoo.cgi";
var element = ["Result", "Title"];
var xhrDS = new YAHOO.widget.DS_XHR(xml, element);
xhrDS.responseType = YAHOO.widget.DS_XHR.TYPE_XML;
xhrDS.maxCacheEntries = 100;
var autoCmp3 = new YAHOO.widget.AutoComplete(
"input3", "suggest3", xhrDS);
autoCmp3.animVert=true;
autoCmp3.animHoriz=true;
autoCmp3.useShadow=true;
autoCmp3.maxResultsDisplayed = 10;
</script>
さらにオートコンプリート風にするためにスタイルシートを定義します。ちなみに下はYahoo!のページに書いてあったものをそのまま持ってきています。
<style type="text/css">
#suggest3 {position:absolute;z-index:9050;}
/* オートコンプリートの表示領域の設定だと思われる */
#suggest3 .yui-ac-content {position:absolute;left:0;top:0;width:20em;border:1px solid #404040;background:#fff;overflow:hidden;text-align:left;z-index:9050;}
/* 影をつける設定にした時に有効 */
#suggest3 .yui-ac-shadow {position:absolute;left:0;top:0;margin:.3em;background:#a0a0a0;z-index:9049;}
/* 検索結果はリスト形式で出力されるのでその設定 */
#suggest3 ul {padding:5px 0;width:100%;}
#suggest3 li {padding:0 5px;cursor:default;white-space:nowrap;}
/* 選んでいる部分に色をつけている */
#suggest3 li.yui-ac-highlight {background:#ff0;}
</style>
これで適当な文字を入力するとYahooのウェブ検索Webサービスの結果が表示されるのがわかると思います。(Firefoxで日本語入力をするといまいち動作が怪しい？)
trueにするとAnimationを使って上から下にぐぅいーとでてきます。trueにするとAnimationを使って左から右にぐぅいーとでてきます。animVertも同時に有効にすると斜めにぐぅいーってなります。falseにしていても、ハイライトはされる。yui-ac-highlight。好きな名前に変更できる。null。指定すると、ハイライト前に色々エフェクトを追加できる（のだろう）trueでyui-ac-shadowにうまくスタイルを設定して影っぽく見せる事ができるようになる。trueにしなければならない。trueにすると、リストから選択することを強制させることが可能になります。もしリストから選択しないと、入力値は自動的に削除されます。trueにすると、自動的に一番上の行が選択される。falseならtoLowerCase()をして比較される。デフォルトfalsefalseならSTARTSWITH。デフォルトfalsemyXHRDataSource.scriptQueryParam = "tag";で/url?tag=fooとなるmyXHRDataSource.scriptQueryAppend = "abc=123&def=456";で/url?query=foo&abc=123&def=456となるmyXHRDataSource.responseStripAfter = "\n<!-"とする