فیلترها (پیشرفته)

از ویکی کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکون‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

بوت استرپ مؤلفه ای که فیلتر را اعمال کند ندارد. با این حال می‌توان از jQuery برای فیلتر / جستجوی عنصرها استفاده کرد.[۱]

فیلتر کردن جدول ها

یک جستجوی Case-insensitive (عدم حساسیت به بزرگی و کوچکی حروف) را برای آیتم‌های جدول انجام می‌دهد:

مثال

برای جستجوی نام ها، نام های خانوادگی و ایمیل ها، متنی را در فیلد ورودی تایپ کنید :

jQuery

 1 <script>
 2 $(document).ready(function(){
 3   $("#myInput").on("keyup", function() {
 4     var value = $(this).val().toLowerCase();
 5     $("#myTable tr").filter(function() {
 6       $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
 7     });
 8   });
 9 });
10 </script>

مشاهدهٔ نتیجه


توضیح مثال: از jQuery برای جستجو در هر ردیف جدول استفاده می‌شود تا وجود هرگونه متن مطابق با عبارت تایپ شده در فیلد ورودی بررسی شود. متد toggle ردیفی را پنهان می‌کند (display:none) که با عبارت جستجو شده مطابقت ندارد. از متد toLowerCase() برای تبدیل متن به حروف کوچک استفاده می‌شود که جستجو را غیرحساس به بزرگی و کوچکی حروف (به انگلیسی: insensitive) می‌کند (جستجوی “john”، “John” و حتی “JOHN” را ممکن می‌سازد).

فیلتر کردن لیست ها

مثال

مشاهدهٔ نتیجه


فیلتر کردن هر چیزی

یک جستجوی غیرحساس به بزرگی و کوچکی حروف (به انگلیسی: case-insensitive) برروی متن دورن یک عنصر div انجام می‌دهد:

مثال

مشاهدهٔ نتیجه


منابع آموزشی