<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>一致したデータを表示する（非リアルタイム）</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
findText = "";
function loadDataFile(fName)
{
new Ajax.Request(fName, { method: 'get', onComplete: displayData });
findText = $("searchText").value; // 検索する文字
}
function displayData(httpObj)
{
$("result").innerHTML = parseTabText(httpObj.responseText);
}
// タブ区切りテキストを解析して一致したデータを表示
function parseTabText(tabText)
{
var resultText = "<table border='1' cellspacing='0'>";
var LF = String.fromCharCode(10); // 改行コード (LF)
var TAB = String.fromCharCode(9); // タブコード
var lineData = tabText.split(LF);
for (var i=0; i<lineData.length; i++)
{
var itemData = lineData[i].split(TAB);
var str = itemData[0].match(findText);
if (str)
{
resultText += "<tr><td>"+itemData[0]+"</td><td align='right'>"+itemData[1]+"円</td></tr>";
}
}
resultText += "</table>";
return resultText;
}
// --></script>
</head>
<body>
<h1>一致したデータを表示する（非リアルタイム）</h1>
<form onSubmit="loadDataFile('sample.txt');return false">
<input type="text" value="メロン" id="searchText">
<input type="button" value="検索" onClick="loadDataFile('sample.txt')"><br>
</form>
<div id="result"></div>
</body>
</html>
説明などは本書を参考にしてください。