リスト要素のフィルタリングとかに便利そうな JavaScript を書いてみた

自分が欲しかったので作ってみました。40 行程度のしょぼいスクリプトです。
https://github.com/abicky/query-matcher-js

最近お仕事で CoffeeScript を触る機会があるので（個人的にはあまり書きたくないですが）CoffeeScript で書いてます。

何がしたかったか？

ずらーーっと項目の並んだリストから所望の項目を選ぶためにブラウザの検索機能を使うのがけっこうストレスだったので、クエリを入力すると条件にマッチする項目だけを表示するようにしたかったです。

っで、最初は次のようにすればいいかなぁと思っていたんですが、2 つのキーワードを入力して両方にマッチするものだけ表示したいなぁと思ったわけです。

var regex = new RegExp($('#query').val(), 'i');
$('#list li').each(function() {
  $(this).css('display', $(this).text().match(regex) ? 'list-item' : 'none');
});

そうなると、少なくともどちらか 1 つにマッチするものだけ表示できるようにもしたくなりました。
そこまでするんだったら、ついでに特定のキーワードにマッチしないものだけ表示するようにもしたいですよね。

世の中には便利なライブラリがたくさん存在するんで、そのようなことを実現できるものを誰かしら作っていそうですが、どう検索すれば見つかるか見当が付かなかったので（上のコードのようなシンプルなコードなら見つかりますが）、自分で作った方が早そうと思って今に至ります。あと、CoffeeScript の勉強も兼ねて。

デモ

次の入力フィールドにクエリを入力すると条件にマッチする項目だけ表示されます。
Google 検索同様、スペース区切りは AND 条件、大文字の OR を挟むと OR 条件、キーワードの先頭に - を付けると NOT 条件になります。
あと、全て小文字のキーワードは case insensitive、大文字を含むキーワードは case sensitive です。

JavaScript は次のように単純なものです。

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="./lib/query-matcher.js"></script>
<script>
$(function() {
  var $fruits = $('#fruits-list li');
  $('#query').on('keyup', function() {
    var matcher = new QueryMatcher($(this).val());
    $fruits.each(function() {
      $(this).css('display', matcher.match($(this).text()) ? 'list-item' : 'none');
    });
  });
});
</script>

というわけで、よかったらお使いください！

P.S. cake の使いどころがわからないです・・・