JS習作:ページ内のリストの中から目的の物を探し出す
概要
1月2週目のJavaScriptです。 フォームにテキストを入力してボタンを押すと、リストの中から該当した物だけを残して非表示にします。 jQuery使用。
ソースコード
$(function (){
var ranking_list = $('#designerList li');
function list_search() {
$(ranking_list).show('fast');
var search_word = $('#searchInput').val();
if(search_word){
$(ranking_list).not($(ranking_list + ':contains(' + search_word + ')').closest('li')).hide('fast');
} // end if
}
$('#searchButton').click(function(){
list_search();
});
/*@cc_on
var key_code = 0;
$('#searchInput').keydown(function(down){
if (down.keyCode == '13')
list_search();
});
@*/
});
感想など
IE用の部分
IEは入力フォームでエンターを押しても動作してくれなかったので、キーコードを直接送る事で対応しました。
今回もIEにのみ読み込ませるようにしたのだけど、この手の部分はどうするのが良いのかなあ。 Firefoxなども適用してしまっていいんだろうか。
苦労した部分
テキストノードを取得する部分と、非表示にするのは該当した物以外である所が大分苦労しました。 会社のプログラマーの人に聞いたりして。
改良したい点
- アルファベットのケースの差を吸収したい。