• かちびと.net

    簡単なjQueryコードでリストメニューにフィルタリング機能を加える方法をご紹介。既存のリストメニューにも追加できるのでぜひ試してみてください。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

簡単なjQueryコードでリストメニューにフィルタリング機能を加える

スポンサーリンク

縦長になってしまったリストメニューは非常に
見にくく、使いづらいものです。ECサイトなんか
でも頻繁に見かける光景ですが、カテゴリで
分けてもそれはそれで探しにくくなってしまった
りと、あっちたてればこっち立たずみたいな経験
は無いでしょうか?あ、無いですか・・

そんな縦長のリストメニューの使いにくさを解消する一つの手としてフィルタリング機能があります。フィルタリングは簡単なjQueryのコードで実現することが可能です。

デモ

縦長のメニューです。テキスト入力でフィルタリングできます。

検索ボックスにテキストが入力されていればフィルタリングされるので、長いリストでも探しやすく選択しやすいです。

Chromeだといい動きなんですが、FirefoxやIEだとエンター押さないと動作しないですかね?今確認出来ない状況で申し訳ないですが、問題ありましたらご自身で工夫してみてください。

コード

(function ($) {
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };
  function filterList(header, list) {
    var form = $("<form>").attr({"class":"filterform","action":"#"}),
        input = $("<input>").attr({"class":"filterinput","type":"text"});
    $(form).append(input).appendTo(header);
    $(input)
      .change( function () {
        var filter = $(this).val();
        if(filter) {
		  $matches = $(list).find('a:Contains(' + filter + ')').parent();
		  $('li', list).not($matches).slideUp();
		  $matches.slideDown();
        } else {
          $(list).find("li").slideDown();
        }
        return false;
      })
    .keyup( function () {
        $(this).change();
    });
  }
  $(function () {
    filterList($("#form"), $("#list"));
  });
}(jQuery));

本体と上記コードのみで動作します。デモではマッチした要素を抽出する条件としてリンクを用いています($matchesのfindメソッドの部分です)。既存のサイトに応じて変更してください。

マークアップ

<div class="japan-area">
    <div id="form"></div>
</div>
  <ul id="list">
		<li><a href="#">北海道(ほっかいどう)</a></li>
		<li><a href="#">青森県(あおもり)</a></li>
            ・
            ・
            ・
</ul>

div id=”form”の中に検索ボックスを呼び出し、ul id=”list”内をフィルタリングできます。ulでリストを作っているコンテンツに気軽に導入出来るのでなかなか汎用性があるかなと。既存のメニューに加える場合はコードのセレクタを既存のマークアップに合わせてください。うまく実践に取り入れていきたいです。

下記を参照しました。なんか違ってたら改善よろしくお願いします:)

via:papermashup.com

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services