[tangoHokanライブラリ] 単語の候補を表示する

説明

tangoHokanライブラリで単語の候補を表示するには、jQueryのセレクタで候補を表示したいinputタグを指定します(name属性だけでなくid属性も指定しておきます)。あとはtangoHokan()メソッドを呼び出します。表示される候補はあらかじめdata.jsonファイルに記述しておきます。data.jsonファイルにはinputタグで指定したID名と単語候補を組み合わせて記述します。

サンプルプログラム

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/tangohokan.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/tangohokan.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>入力補助機能</h1>
<form>
使ったことがあるmzマシン:<input type="text" name="mz" id="mz" class="tangoHokan">
</form>
</body>
</html>


【sample.js】
$(function(){
$("input.tangoHokan").tangoHokan({
noResult : "該当する候補がありません"
});
})


【data.json】
({
"mz": [
"mz-80K",
"mz-1200",
"mz-700",
"mz-1500",
"mz-2000",
"mz-2200",
"mz-2500",
"mz-2861",
"mz-3500",
"mz-5500",
"mz-6500"
]
})
サンプルを実行
[戻る]