JavaScript , Java , DOS , HTML(CSS) , JSP , SQL , VB , VBScript , ・・・etc などの覚書
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
オートコンプリート例
CGIを使用しないオートコンプリート
だいたい検索容量が100KBから200KB程度で動作する。
リストは、UTF-8にしており、datファイルとして保存。
【sample.dat】
var codeList = [
"100-0000 東京都千代田区以下に掲載がない場合",
"102-0072 東京都千代田区飯田橋",
"102-0082 東京都千代田区一番町",
"101-0032 東京都千代田区岩本町",
"101-0047 東京都千代田区内神田",
"100-0011 東京都千代田区内幸町",
・
・
・
];
【HTML】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title>Sample</title>
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js?load=effects,controls" type="text/javascript"></script>
<script src="codelist.dat" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
new Autocompleter.Local("postcode", "addr", codeList, {minChars:6});
}
</script>
<style type="text/css">
#postcode {
width:400px
}
#addr ul{
margin-top:0px;
border: 1px solid #aaa;
list-style:none;
padding:2px;
background-color:#ffc;
}
#addr .selected {
background-color: #ccf;
cursor:default;
}
</style>
</head>
<body>
<p>郵便番号から入力してください。</p>
<form id="form01">
<input type="text" name="postcode" id="postcode" >
<div id="addr"></div>
</form>
</body>
</html>
download:オートコンプリート例
CGIを使用しないオートコンプリート
だいたい検索容量が100KBから200KB程度で動作する。
リストは、UTF-8にしており、datファイルとして保存。
【sample.dat】
var codeList = [
"100-0000 東京都千代田区以下に掲載がない場合",
"102-0072 東京都千代田区飯田橋",
"102-0082 東京都千代田区一番町",
"101-0032 東京都千代田区岩本町",
"101-0047 東京都千代田区内神田",
"100-0011 東京都千代田区内幸町",
・
・
・
];
【HTML】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title>Sample</title>
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js?load=effects,controls" type="text/javascript"></script>
<script src="codelist.dat" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
new Autocompleter.Local("postcode", "addr", codeList, {minChars:6});
}
</script>
<style type="text/css">
#postcode {
width:400px
}
#addr ul{
margin-top:0px;
border: 1px solid #aaa;
list-style:none;
padding:2px;
background-color:#ffc;
}
#addr .selected {
background-color: #ccf;
cursor:default;
}
</style>
</head>
<body>
<p>郵便番号から入力してください。</p>
<form id="form01">
<input type="text" name="postcode" id="postcode" >
<div id="addr"></div>
</form>
</body>
</html>
download:オートコンプリート例
PR
文字検索例
ページ内に記載された文字列から、指定の文字を検索する。
親ページから検索ウィンドウ（子ページ）を表示させ、子ページ内のスクリプトで検索を行う。
************************************
function findText(formObj)
{
dst = formObj.srchText.value;
if (document.all)
{
if (formObj.iCase.checked) ignore = 4; else ignore = 0;
src = window.opener.document.body.createTextRange();
flag = src.findText(dst,1,ignore);
}
if (document.layers)
{
flag = window.opener.find(dst, formObj.iCase.checked, false);
}
if (flag) alert("発見"); else alert("見つかりません");
}