ブートストラップフィルター(詳細)
ブートストラップフィルター
ブートストラップには、フィルタリングを可能にするコンポーネントがありません。ただし、 jQueryを使用して要素をフィルタリング/検索することはできます。
フィルターテーブル
テーブル内のアイテムで大文字と小文字を区別しない検索を実行します。
例
Type something in the input field to search the table for first names, last names or emails:
Firstname | Lastname | |
---|---|---|
John | Doe | [email protected] |
Mary | Moe | [email protected] |
July | Dooley | [email protected] |
Anja | Ravendale | [email protected] |
jQuery
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var
value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
説明した例: jQueryを使用して各テーブル行をループし、入力フィールドの値と一致するテキスト値があるかどうかを確認します。このtoggle()
メソッドはdisplay:none
、検索に一致しない行()を非表示にします。このメソッドを使用しtoLowerCase()
てテキストを小文字に変換します。これにより、検索で大文字と小文字が区別されなくなります(検索では、「john」、「John」、さらには「JOHN」も使用できます)。
フィルタリスト
リスト内の項目で大文字と小文字を区別しない検索を実行します。
例
Type something in the input field to search the list for items:
- First item
- Second item
- Third item
- Fourth
フィルタのドロップダウン
ドロップダウンメニューで大文字と小文字を区別しないアイテムの検索を実行します。
例
Open the dropdown menu and type something in the input field to search for dropdown items:
何でもフィルタリング
div要素内のテキストで大文字と小文字を区別しない検索を実行します。
例
I am a paragraph.
I am a div element inside div.
Another paragraph.