AutoComplete Control: Basic Local Data

Ajax Javascript YUI AutoComplete

AutoCompeteとは、画面への入力中に、その候補を（次々と）自動的に拾って表示する機能のこと。
このようなsuggestionをしてくれるアプリケーションが多くなった。

YUIのAutoCompleteのTOPページを見ると、この入力補完機能のためのデータの供給はYAHOO.util.DataSourceと書いてある。
DataTableのサンプルで散々使ったオブジェクト。うまくDAOとして機能して、リソースが「どこにあるか」を殆ど感じさせないインターフェイスとの印象がある（つまり、この部分はDataSourceのサンプルが参考になるということだ）。

このExampleでは、HTMLと同一のサーバー内にあるデータ（Local Dataと呼んでいる。JavascriptのArray）を読み込んで、リストボックスを使った以下のような入力補助を行う。

以下にソースコードを示すが、DataTableの作成と非常によく似ていることに驚く。
YUIのExampleでは、LocalDataSourceオブジェクトを使用しているが、（DataTableのところで使わなかったので）普通のDataSourceオブジェクトで読みこむように変更した。

<!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>Ajax Sample</title> 
 
<style type="text/css"> 
body {
	margin:0;
	padding:0;
}
</style> 

<link rel="stylesheet" type="text/css" href="scripts/yui/fonts/fonts-min.css" /> 
<link rel="stylesheet" type="text/css" href="scripts/yui/autocomplete/assets/skins/sam/autocomplete.css" /> 
<script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="scripts/yui/animation/animation-min.js"></script> 
<script type="text/javascript" src="scripts/yui/datasource/datasource-min.js"></script> 
<script type="text/javascript" src="scripts/yui/autocomplete/autocomplete-min.js"></script> 

<style type="text/css" id="defaultstyle">
#main {
	margin: 2px;
	padding: 3px;
}

#myAutoComplete {
    width:15em; /* set width here or else widget will expand to fit its container */
    padding-bottom:2em;
}

</style>

<script type="text/javascript" src="scripts/yui/autocomplete/assets/js/data.js"></script> 
<script type="text/javascript"> 
YAHOO.util.Event.addListener(window, "load", function() {
	
	YAHOO.example.BasicLocal = function() {

		// DataSourceの作成。
	    var oDS = new YAHOO.util.DataSource(YAHOO.example.Data.arrayStates);
            oDS.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
	    oDS.responseSchema = {
	    	    fields : ["state"]
	    }; 
    	    
	 	// AutoCompleteインスタンスの生成
	    var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
	    // Default
	    oAC.prehighlightClassName = "yui-ac-prehighlight";
		// リストボックスに影がつく
	    oAC.useShadow = true;
	    	      
        return {
            oDS: oDS,
            oAC: oAC
       };
    }();
});
</script>
</head> 
 
<body class=" yui-skin-sam">
<div id="main">
<p>AutoCompleteのサンプルです。<br/>
Httpサーバーにあるjsファイルから、データを取得します。</p>
<div id="myAutoComplete"> 
	<input id="myInput" type="text"> 
	<div id="myContainer"></div> 
</div> 
</div>
</body> 
</html>