فیلترها (Filters)

اینجا با فیلترها در jQuery آشنا می شوی. فیلتر یعنی جستجوی سریع بین چند عنصر و مخفی کردن چیزهای نامربوط؛ شبیه جستجو داخل لیست مخاطبین گوشی.

فیلترها در jQuery چیستند؟

با jQuery می توانی بین چند عنصر صفحه بگردی و فقط آن هایی را که با متن جستجو هماهنگ هستند نشان بدهی. این کار با ترکیب رویداد keyup و متد filter() انجام می شود.

رویداد keyup یعنی وقتی دکمه کیبورد را رها می کنی. متد filter در jQuery روی هر عضو مجموعه می چرخد و بر اساس یک شرط تصمیم می گیرد که آن عضو را نگه دارد یا نه.

فیلتر کردن جدول با jQuery

در مثال منبع، یک جدول با چند ردیف داریم. کاربر داخل یک input تایپ می کند و جدول به صورت لحظه ای فیلتر می شود. جستجو نسبت به حروف بزرگ و کوچک حساس نیست؛ یعنی john و JOHN یکی حساب می شوند.

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
    });
  });
});

مشاهده در ادیتور

در این کد:

• $("#myInput") فیلد جستجو را انتخاب می کند.
• رویداد keyup با هر تایپ، تابع را اجرا می کند.
• val() مقدار input را می گیرد.
• toLowerCase() متن را کوچک می کند تا جستجو حساس نباشد.
• $("#myTable tr") همه ردیف های جدول را انتخاب می کند.
• filter() روی هر ردیف حلقه می زند.
• toggle() ردیفی که شرط را ندارد مخفی می کند.

تابع text() متن کل ردیف را می گیرد. سپس indexOf(value) موقعیت متن جستجو را داخل آن پیدا می کند. اگر نتیجه بیشتر از -1 باشد، یعنی متن پیدا شده است؛ پس ردیف نمایش داده می شود.

1. لینک «مشاهده در ادیتور» جدول را باز کن.
2. نامی مثل John را تایپ کن.
3. ببین فقط ردیف های مربوط نمایش داده می شوند.

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

همان ایده جدول را می توانی روی لیست ها هم پیاده کنی. در مثال بعدی، یک لیست ساده <ul> داریم که آیتم های آن با تایپ کاربر فیلتر می شوند.

$(document).ready(function() {
  $("#myInputList").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myList li").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
    });
  });
});

مشاهده در ادیتور

تنها تفاوت این کد با جدول در انتخاب کننده است. به جای #myTable tr از #myList li استفاده می کنیم. پس این الگو را می توانی روی هر لیست دیگر هم اعمال کنی.

1. ادیتور لیست را باز کن.
2. کلمه first یا third را تایپ کن.
3. ببین کدام آیتم ها باقی می مانند.

نکته: با تغییر انتخاب کننده داخل filter() می توانی جستجو را روی نوع دیگری از عناصر انجام دهی؛ مثلا فقط روی آیتم های داشتن کلاس خاص.

فیلتر کردن هر نوع عنصر داخل یک div

در مثال سوم، فیلتر را برای «تقریباً همه چیز» داخل یک <div> استفاده می کنیم. یعنی پاراگراف، دکمه و div داخلی همگی بررسی می شوند.

$(document).ready(function() {
  $("#myInputDiv").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myDIV *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
    });
  });
});

مشاهده در ادیتور

انتخاب کننده #myDIV * یعنی همه عناصر داخل #myDIV. ستاره در CSS Selector یعنی «هر چیزی». پس فیلتر روی تمام فرزندان این div اجرا می شود.

در اینجا هم همان منطق قبلی استفاده شده است. مقدار input به حروف کوچک تبدیل می شود. سپس متن هر عنصر بررسی می شود و در صورت هماهنگ بودن، آن عنصر نمایش داده می ماند.

1. مثال «Filter Anything» را در ادیتور اجرا کن.
2. کلمات paragraph یا button را تایپ کن.
3. ببین کدام عناصر نشان داده می شوند.

چند نکته مهم درباره فیلترها در jQuery

در این مثال ها از DOM استفاده می کنیم. DOM مخفف Document Object Model است و نمایشی درختی از عناصر صفحه است. متد text() متن هر عنصر را از همین ساختار درختی می خواند.

همچنین از جستجوی غیرحساس به حروف استفاده کردیم. این کار با متد toLowerCase() انجام شد. ابتدا متن ورودی و متن داخل عنصر را کوچک می کنیم، سپس آن ها را با هم مقایسه می کنیم.

اگر دوست داری بیشتر روی انتخاب گرها و فیلترها تسلط بگیری، حتماً بعداً سراغ صفحه فیلترها در jQuery هم بیا. همچنین صفحه noConflict رفع تداخل () (noConflict()) بهت کمک می کند وقتی jQuery با کتابخانه های دیگر ترکیب می شود، همه چیز مرتب بماند.

جمع بندی سریع

• فیلترها در jQuery برای جستجوی سریع بین عناصر صفحه استفاده می شوند.
• رویداد keyup باعث می شود با هر تایپ، لیست دوباره فیلتر شود.
• متد filter() روی هر عنصر حلقه می زند و شرط را بررسی می کند.
• متد toggle() عناصر نامربوط را مخفی می کند.
• با تغییر انتخاب کننده، می توانی جدول، لیست یا هر مجموعه دیگری را فیلتر کنی.