Blog

※ブログ移転しました。 → hamashun.me

2010年02月Archives

2010年02月07日

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なども適用してしまっていいんだろうか。

苦労した部分

テキストノードを取得する部分と、非表示にするのは該当した物以外である所が大分苦労しました。 会社のプログラマーの人に聞いたりして。

改良したい点

  • アルファベットのケースの差を吸収したい。

Blog Search
Search
Recent Entry
Category
Monthly Archive