معرفی کتابخانه Select2

کتابخانه Select2 مبتنی بر جی کوئری برای جعبه های کشویی نظیر دسته بندی و برچسب ها است, دارای پشتیبانی از جستجو، مجموعه داده های از راه دور، و صفحه بندی نتایج است.

موارد استفاده:

  • بهبودانتخاببومیباجستجو.
  • بهبودانتخاببومیبایکرابطکاربری چندانتخاببهتر.
  • بارگزاریداده‌هاازجاوا اسکریپت:به راحتیمواردرااز طریقAJAXبارگذاریکنید وقابلجستجوکنید.
  • Nestingoptgroupsتنها ازیکسطحبومیپشتیبانی می‌کنند.Select۲اینمحدودیتراندارد.
  • برچسب ها :تواناییافزودن مواردجدید در حالت پرواز.
  • کاربامجموعه داده‌هایبزرگودوردست:تواناییبرایبارکردن جزئییکمجموعه داده‌هابراساساصطلاحجستجو.
  • صفحه بندیازمجموعه داده‌هایبزرگ:پشتیبانیآسانبرایبار کردنصفحاتبیشتروقتیکهنتایجبهانتهامتصل می‌شوند.
  • پوسته ها :پشتیبانیازترسیمسفارشینتایجوانتخاب‌ها

طریقه استفاده و نصب آن:

لینک فایل Select2 زیر در داخل تگ <head> قرار دهید:

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

نمونه کد زیر (Single select boxes):

<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

جاوا اسکریپت:

$(document).ready(function() {
    $('.js-example-basic-single').select2();
});

نمونه کد زیر(Multi-select boxes (pillbox)):

<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

جاوا اسکریپت:

$(document).ready(function() {
    $('.js-example-basic-multiple').select2();
});

 

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *