2012-02-29 12 views
1

私はjQuery Isotopeで遊んでいて、要素検索を実装したいと考えています。ときにユーザーがテキストボックスに、私はこのようなフィルタオプションを変更します。jQueryセレクタを使用してjQuery同位体アイテムをフィルタリングする方法(検索)

var newFilter = '[data-myAttr*="' + $('#mySearchBox').val() + '"]'; 
$('#myIsotopeContainer').isotope({filter: newFilter}); 

私はjQueryのattribute contains selectorを使用しています。しかし、大文字と小文字が区別されますので、で大文字にしたいと考えています。どうすればこれを達成できますか?

私は.filter(fn)を使用して示唆されている他の質問とGoogleの結果を見ましたが、同位体でそれほど制御できません。私はそれにセレクタを与えます。

+0

myAttrの値はどこから来たのかわからず、すべて小文字にして検索値を小文字に変更すると意味があるようです。 – charlietfl

+0

これはまったくもっとも簡単な解決方法です。回答として投稿し、少なくともアップフォートします。 –

答えて

1

は、私は少し違っこれをやっている私のような人々のためにこの質問に関連している答えを与えたい

3

同位体のソースを見てから、あなたはこのように、関数を渡すことができる必要があります:

$('#myIsotopeContainer').isotope({ filter: function() { 
     // case-insensitive pattern match: 
     var pattern=new RegExp($('#mySearchBox').val(),'i'); 

     // test against 'data-myAttr': 
     return pattern.test(this.attr('data-myAttr')); 
    } 
}); 

同位体は、単にそれ自身のフィルタリングを行うための.filter()呼び出しを行います。試して何が起こるか見てみましょう。

+0

+1フィルターの関数を追加すると効果的です。私は子供の属性に基づいてフィルタリングする必要がありました。 – lucuma

0

を小文字にユーザー入力を変更するすべての属性のためのプロトコルとして、下ケースを使用して。私は、要素だけでなく要素全体(または要素の子要素)内のテキストを検索したかったのです。 :containsセレクタを使用していて大文字小文字を区別しないようにするには、this bug reportで概説されているようにJQueryを拡張する必要があります。私は利便性のために以下のコードを掲載しています:

$.extend($.expr[':'], { 
    'containsi': function(elem, i, match, array) 
    { 
    return (elem.textContent || elem.innerText || '').toLowerCase() 
    .indexOf((match[3] || "").toLowerCase()) >= 0; 
    } 
}); 

今、あなたはあなたのようなjQueryのを使用することができますが使用しているだろう:含まれている(「SomeString」)が、今、あなたの新しい拡張を使用します。containsi(「SomeString」)

関連する問題