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
この記事にコメントする