Yahoo UIでは候補となる文字列をJSONとして定義しておき、YAHOO.util.LocalDataSourceで読み込んで使用する。候補の一覧を表示する場合は、候補一覧の表示/非表示のトグルを作成してボタンに登録といった実装が必要になるが、こちらの場合もサンプルにまとめられているので参考にしたい。

HTMLファイル - autocomplete-yui.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>AutoComplete / Yahoo UI</title>
<link rel="stylesheet" type="text/css" href="./js/yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="./js/yui/build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="./js/yui/build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="./js/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="./js/yui/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="./js/yui/build/autocomplete/autocomplete-min.js"></script>
<script type="text/javascript" src="./autocomplete-yui.js"></script>
<script type="text/javascript">
<!--
YAHOO.util.Event.onDOMReady
(
    function()
    {
        YAHOO.example.BasicLocal = 
            function()
            {
                var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.jsFramework);
                var oAC = new YAHOO.widget.AutoComplete('autoComplete', 'autoCompleteContainer', oDS);
                oAC.prehighlightClassName = 'yui-ac-prehighlight';
                oAC.useShadow = true;

                return {
                    oDS: oDS,
                    oAC: oAC
                };
            }();
    }
);
-->
</script>
</head>

<body class="yui-skin-sam">

<h1>AutoComplete / Yahoo UI</h1>

<div style="width:200px;">
    <input type="text" id="autoComplete">
    <div id="autoCompleteContainer"></div>
</div>

</body>

</html>

JSファイル - autocomplete-yui.js

YAHOO.example.Data =
{
    jsFramework:
    [
        'jQuery',
        'Dojo',
        'Yahoo UI',
        'YUI'
    ]
};

Firefoxでの動作イメージ

Internet Explorerでの動作イメージ

凝ったWebアプリケーションを作るにあたり、最善の選択を

以上、業務支援系Webアプリケーションですぐに組み込めるウィジェットを4つ紹介した。これらのUIをすべて自前で組むとなると実装だけで大変な時間がかかる上に、どうしても自分以外のデベロッパからみたときに分かりづらいコードになりやすい。JavaScriptフレームワークを使用してプロジェクトを進めている場合は、これらウィジェットの原理を理解したうえでうまく組みこみ、実装時間・のちの保守に要するであろう時間をなるべく短くしていきたいところだ。

今回紹介したウィジェットの一部は、各種フレームワークの配布Webサイトにてデモとして公開されている。ウィジェットを組み込む前に動作やコードをひととおり確認しておきたい場合は、以下の「関連サイト」を適宜参照してほしい。