ども。はてなインターンの課題でインクリメンタルサーチを実装しようとしたら詰まったので、他の人の助けになればと思い、このエントリを書きます。
jQueryでは、どれかの条件を満たすような要素を、セレクタを用いて選択することができます。つまりOR条件です。
$('tr:contains(hogehoge)') // 'hogehoge'が含まれる<tr>が選択される
$('tr:contains(hogehoge), tr:contains(hugahuga)' // 'hogehoge'が含まれる<tr>もしくは'hugahuga'が含まれる<tr>が選択される
しかしながら、jQueryは「すべての条件を満たす」ような要素を選択することができません。言い換えると、AND条件での選択ができないのです。
ここで解決策として、NOT条件を使用する方法を紹介します。jQueryでは条件の否定を行うセレクタが存在します。
$(':not(tr:contains(hoge))') // 「'hoge'を含む<tr>」でない要素を選択する
これに加えて、高校数学で習う「ドモルガンの法則」を使います。
¬(P∧Q) = ¬P∨¬Q aka. !(P && Q) == !P || !Q
これを否定することで
(P∧Q) = ¬¬(P∧Q) = ¬(¬P∨¬Q) aka. P && Q == !!(P && Q) == !(!P || !Q)
したがって、次のように記述することで複数条件を満たすような要素を選択することができます。
$(':not(:not(tr:contains(hoge)), :not(tr:contains(huga)))') // 'hoge'を含み、かつ'huga'を含む<tr>を選択する
これがひらめいたおかげでインクリメンタルサーチ*1が実装できましたとさ。めでたしめでたし。
*1:正確には複数単語を含むインクリメンタルサーチ
