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

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

فیلترهای بوت استرپ

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

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

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

مثال

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

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() برای تبدیل متن به حروف کوچک استفاده می‌شود که جستجو را insensitive می‌کند (جستجوی “john”، “John” و حتی “JOHN” را ممکن می‌سازد).

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

جستجوی case-insensitive را در میان آیتم‌های لیست انجام می‌دهد:

مثال

برای جستجوی آیتم‌ها عبارتی را در فیلد ورودی تایپ کنید:
مشاهدهٔ نتیجه


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

یک جستجوی case-insensitive بر روی آیتم‌های درون منوی کرکره ای انجام می‌دهد:

مثال

منوی کرکره ای را باز کرده و برای جستجو در میان آیتم‌های آن، عبارتی را در فیلد ورودی تایپ کنید:
مشاهدهٔ نتیجه


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

یک جستجوی Case-insensitive برروی متن دورن یک عنصر div انجام می‌دهد:

مثال


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


منابع آموزشی