memo.xight.org

/ / memo.xight.org

2004-11-05

JavaScript でインクリメンタル grep 検索

- Summary
  JavaScriptでinput要素のonkeyup属性を利用してインクリメンタル grep 検索を実現.

検索対象とする各行を <span class="line">...</span> で囲っておいて,
pattern にマッチした以外の行を非表示にするという手法を取っている


- JavaScriptのソース (元ソース)

function grep (pattern) {
	try {
		regex = new RegExp(pattern, "i");
		spans = document.getElementsByTagName('span');
		for (i = 0; i < spans.length; i++) {
			e = spans[i];
			if (e.className == "line" && e.innerHTML.match(regex)) {
				e.style.display = "inline";
			} else {
				e.style.display = "none";
			}
		}
	} catch (e) {
		// 正規表現の文法エラーを無視する
	}
}


- HTMLのソース - インクリメンタル grep 検索 (元ソース)
<form>
<input type="text" name="pattern" onkeyup="grep(this.value)">
</form>


- HTMLのソース - grep 検索 (元ソース)
<form onsubmit="grep(this.pattern.value); return false;">
<input type="text" name="pattern">
</form>

- Reference
  いやなブログ - 2004-11-04
  http://namazu.org/~satoru/blog/archives/000008.html
- via
  読書記録ChangeLog - 2004-11-04
  http://dkiroku.com/2004-11-04.html#2004-11-04-15
カテゴリ: [JavaScript]
内部リンク: [2004-11-30-6]
2004-11 /

Color Reference

ChangeLogを検索
携帯電話からアクセス!

カテゴリ

最近の話題

リンク

過去ログ

Google

QR Code

Since
2002-11-28
Update
2008-12-02 10:52
Copyright © 2005 xight.org All Rights Reserved.