スライドを開く

Prototype.jsだけで実現するオートコンプリートライブラリ「AutoComp.js RC1」

2008年4月 1日 14:45　 | | コメント(0) | トラックバック(0) | | トップへ |
autocomp_rc1.jpg
prototype.jsとscript.aculo.us使うことでオートコンプリート機能を実装できますが、オートコンプリート専用のライブラリ「AutoComp.js」をつかってjavascriptだけでオートコンプリートからデータの表示まで実現します。

デモ：http://d-remix.net/jsap/autocomp_design/

※テストライブラリなので、利用方法は載せていません、自己責任で利用してください。
ライセンス：MIT-style license





HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prototypeオートコンプリートライブラリ RC1</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/autocomp.js"></script>
<script type="text/javascript" src="js/html.js"></script>
<script type="text/javascript">
window.onload = function(){
	new AutoComp.Onload("false");
}
</script>
</head>
<body id="Allbox">
<div>
<h1>Prototypeオートコンプリートライブラリ</h1>
<p>このオートコンプリートライブラリはjavascriptのみで動作し、簡単にデータを扱えます。<br />
※最新のブラウザであればどのブラウザでも問題無く動作します。</p>
<div id="FormBox">タグを入力してください。<br /><input id="AutoCompInput" name="text" type="text" /></div>
<div id="AotoCompView"></div>
</div>
</body>
</html>

Javascript

/*  AutoComp JavaScript , version 0.1
 *  (c) 2008 Ryuichi Nonaka
 *
 *  AutoComp is freely distributable under the terms of an MIT-style license.

 *  For details, see the AutoComp web site: http://d-remix.net/autocomp.html
 *
 *--------------------------------------------------------------------------*/

var AutoComp = {
	//変数

	EscapeHTML:'false',
	InputForm:'AutoCompInput',
	ViewBox:'AotoCompView',
	Lists:'AutoCompList',
	//入力補助
	Input:function(){

		//変数
		var Flag = 0;
		var WriteData = "";
		var HtmlWriteData = "";
		//データ取得
		var Data = $F(AutoComp.InputForm);
		//エスケープ処理
		Data = Data.escapeHTML();
		//文字列検索
		if(Data == ""){
			$(AutoComp.ViewBox).innerHTML = "データを入力してください。";
			AutoComp.Blur();
		} else {
			WriteData = WriteData + "<ul>";
			for(var i = 0; i < AutoCompData.length; i++){
				//文字列の検索
				Flag = AutoCompData[i][0].indexOf(Data,0);
				
				//結果書き出し
				if(Flag != -1){
					HtmlWriteData = HtmlWriteData + "<h2>" + AutoCompData[i][0] + "</h2>";
					
					//要素リスト書き出し
					if(AutoCompData[i][1] != ""){
						HtmlWriteData = HtmlWriteData + "<ul>";
						for(var j = 0; j < AutoCompData[i][1].length; j++){

							HtmlWriteData = HtmlWriteData + "<li>" + AutoCompData[i][1][j] + "</li>";
						}

						HtmlWriteData = HtmlWriteData + "</ul>";
					}
					
					//テキスト書き出し
					if(AutoCompData[i][2] != ""){
						//エスケープ処理
						if(AutoComp.EscapeHTML == "true"){
							var TextDatas = AutoCompData[i][2].escapeHTML();
						} else {
							var TextDatas = AutoCompData[i][2];
						}
						HtmlWriteData = HtmlWriteData + "<p>" + TextDatas +"</p>";
					}
					
					WriteData = WriteData + "<li onclick='AutoComp.Post(this)'>" + AutoCompData[i][0] + "</li>";
				}
			}

			WriteData = WriteData + "</ul>";
			//入力数処理
			if(WriteData == ""){
				WriteData = "見つかりませんでした。";
				AutoComp.Blur();
			}

			//書き出し
			$(AutoComp.Lists).innerHTML = WriteData;
			$(AutoComp.ViewBox).innerHTML = HtmlWriteData;
			AutoComp.Focus();
		}
	},
	
	//データ入力
	Post:function(InputData){
		var Data = InputData.innerHTML;
		$(AutoComp.InputForm).value = Data;
		$(AutoComp.InputForm).focus();
		AutoComp.Input();
		AutoComp.Blur();
	},
	
	//フォームフォーカス
	Focus:function(){
		var Elements = $(AutoComp.Lists);
		Element.show(Elements);	
	},
	
	//アウトフォーカス
	Blur:function(){
		var Elements = $(AutoComp.Lists);
		Element.hide(Elements);
	},
	
	//読み込み時処理
	Onload:function(Escape){
		new Event.observe(AutoComp.InputForm, "keyup", AutoComp.Input);
		new Insertion.After(AutoComp.InputForm, "<div id='" + AutoComp.Lists + "'></div>");
		new Event.observe(AutoComp.InputForm, "focus", AutoComp.Focus);
	}
}

CSS

@charset "utf-8";
/* CSS Document */
body { font-size:85%; text-align:center;}
#Allbox { margin: 10px auto 0 auto; width:800px; text-align:left;}
#FormBox { padding:5px; margin:0 0 20px 0; background-color:#eee; border:1px solid #aaa;}
#AutoCompInput { width:200px;}
#AutoCompList ul { width:200px; max-height:100px; overflow:auto; margin:0; padding:0; position:absolute; border:1px solid #aaa; list-style:none; background:#eee;}
#AutoCompList ul li { padding:3px; margin:0; background-color:#eee; font-size:90%; border-top:1px solid #fff; border-bottom:1px solid #ddd;}
#AotoCompView { margin:0 0 10px 0;}
#AotoCompView h2 { padding:5px; border:1px solid #aaa; border-left:5px solid #aaa; background:#eee; font-size:100%;}

オートコンプリート用参照データ

var AutoCompData = Array(
	["a","",""],
	["b",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["em",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["strong",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["div",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["big",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["small",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["p",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["span",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["h1",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["h2",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["h3",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["h4",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["h5",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["h6",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["font",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["html",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["body",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["i",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["head",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["form",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["option",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["select",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["あいうえお",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["かきくけこ",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["さしすせそ",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["たちつてと",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["はひふへほ",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["なにぬねの",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["四捨五入",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["四文字熟語",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["ポタージュ",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["どこでもドア",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["ドラえもん",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["em",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["address",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["link",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["meta",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["script",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["code",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["pre",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["object",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["龍一",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["ryuichi",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["air",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["flex",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["sample",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["yahoo",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["music",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["design remix",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["google",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["msn",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["youtube",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["name",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["css",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["prototype",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["autocomp",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["dl",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["dt",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["dd",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["ul",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["li",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["ol",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"],
	["ヤフー",["属性1","属性2","属性3","属性4"],"<p></p>説明が入ります。"]
);
参考になった。

カテゴリ

使えるAjax

タグ

関連記事

トラックバック(0)

このブログ記事を参照しているブログ一覧: Prototype.jsだけで実現するオートコンプリートライブラリ「AutoComp.js RC1」

このブログ記事に対するトラックバックURL: http://newflow.heteml.jp/mt4/mt-tb.cgi/240

コメントする

2008年4月

S M T W T F S
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30      

このブログ記事について

このページは、龍一が2008年4月 1日 14:45に書いたブログ記事です。

ひとつ前のブログ記事は「Yahooが大変なことに・・・」です。

次のブログ記事は「黒と緑のきれいなCSSデザインサイト10選」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

フィード

  • rss
  • はてなRSSへ追加
  • My Yahooへ追加
  • Livedoorへ追加
  • Google Readerへ追加
  • gooへ追加
  • フィードメーター - webデザイン・webプログラムのメモ帳：Design Remix
  • この日記のはてなブックマーク数

プロフィール

馬場で働く見習いクリエーター。
日々勉強です。

検索

Banner

  • あわせて読みたいブログパーツ
  • チームマイナス6%