dtタグのテキストをインスタンス検索してみる(jQuery利用)

別に運営しているサイトで利用しているため、またjQueryネタ。

HTML部分

<input type="text" onkeyup="search()" onblur="search()" placeholder="検索" id="search">
<dl>
	<dt>りんご</dt>
	<dd>赤い果物</dd>
	<dt>みかん</dt>
	<dd>黄色く果物</dd>
	<dt>ぶどう</dt>
	<dd>紫の果物</dd>
</dl>

JavaScript部分

function search() {
	$('dt').each(function() {
		if($(this).text().indexOf($('#search').val()) == -1) {
			$(this).css("display", "none");
			$("+dd", this).css("display", "none");
		} else {
			$(this).css("display", "block");
			$("+dd", this).css("display", "block");
		}
	});
}

りんご: 赤い果物
みかん: 黄色く果物
ぶどう: 紫の果物

試しに検索ボックスの中に「り」や「ん」などを入力してみてください。この方式では、キーボードからの入力はともかく、コピペ(右クリックで貼り付けを選ぶ)したときに反応しないので、本来ならsetTimeoutメソッドを使って、500ミリ秒ごととかで自動実行するとかしたほうがいいかもしれない(onblur属性を入れてるのはそのための対策でもあるんですが)。

css(“display”, “block”)やcss(“display”, “none”)の部分はshow()やhide()メソッドでもいいはず(むしろそのほうがいいかも？)。

追記：2012年3月28日
最近、”oninput”という、テキストボックスに入力があった場合に発動するイベントがあることを知りました。IE8以下では使えないようですが、onkeyup,onblurと二つも使わずにできるうえに、右クリックで「貼り付け」とやっても動くようです