جعبههای انتخاب تکی
Select2 میتواند یک جعبه انتخاب معمولی را مانند این تبدیل کند...
جعبههای انتخاب چندگانه
Select2 از جعبههای انتخاب چند مقداری نیز پشتیبانی میکند. انتخاب زیر با ویژگی multiple تعریف شده است.
گروههای گزینه در لیست کشویی
در HTML، عناصر <option> میتوانند با استفاده از عنصر <optgroup> گروهبندی شوند:
غیرفعال کردن گزینهها
Select2 به درستی گزینههای غیرفعال را هنگامی که ویژگی disabled تنظیم شود و از منابع خارجی که شیء دارای ویژگی disabled: true است، مدیریت میکند.
غیرفعال کردن کنترل Select2
Select2 به ویژگی disabled روی عناصر <select> پاسخ میدهد. شما همچنین میتوانید Select2 را با ویژگی disabled: true برای ایجاد همان اثر اولیه کنید.
Select2 با برچسبها
شما میتوانید و باید از <label> با Select2 استفاده کنید، درست مانند هر عنصر <select> دیگر.
عرض کانتینر
دو جعبه انتخاب Select2 زیر به ترتیب به عرض 50% و 75% برای پشتیبانی از طراحی ریسپانسیو استایل شدهاند:
تمها
Select2 از تمهای سفارشی با استفاده از گزینه theme پشتیبانی میکند تا بتوانید آن را طوری استایل کنید که با سایر بخشهای برنامه شما مطابقت داشته باشد.
آژاکس (دادههای از راه دور)
Select2 از پشتیبانی آژاکس به طور داخلی با استفاده از متدهای آژاکس jQuery پشتیبانی میکند. در این مثال، ما میتوانیم با استفاده از API گیتهاب، مخازن را جستجو کنیم:
بارگذاری دادههای آرایهای
شما میتوانید از گزینه پیکربندی data برای بارگذاری گزینههای کشویی از یک آرایه محلی استفاده کنید.
انتخاب خودکار
Select2 میتواند به گونهای پیکربندی شود که به طور خودکار نتیجه برجسته فعلی را زمانی که کشویی بسته میشود، انتخاب کند با استفاده از گزینه selectOnbtn-close:
باز ماندن پس از انتخاب
Select2 به طور خودکار کشویی را زمانی که یک گزینه انتخاب میشود، میبندد، مشابه آنچه که در یک جعبه انتخاب عادی انجام میشود. شما میتوانید از گزینه btn-closeOnSelect استفاده کنید تا از بسته شدن کشویی هنگام انتخاب یک نتیجه جلوگیری کنید:
مکان قرارگیری کشویی
گزینه dropdownParent به شما این امکان را میدهد که یک عنصر جایگزین برای الحاق کشویی انتخاب کنید:
محدود کردن تعداد انتخابها
جعبههای انتخاب چندگانه Select2 میتوانند محدودیتهایی در مورد حداکثر تعداد گزینههایی که میتوانند انتخاب شوند، تعیین کنند. جعبه انتخاب زیر با ویژگی multiple اعلام شده است و ویژگی maximumSelectionLength در گزینههای select2 قرار دارد.
ایجاد گزینههای دینامیک
علاوه بر منوی پیشفرض گزینهها، Select2 میتواند به طور دینامیک گزینههای جدیدی از ورودی متنی که توسط کاربر در جعبه جستجو وارد میشود، ایجاد کند. این ویژگی "برچسبگذاری" نامیده میشود. برای فعالسازی برچسبگذاری، گزینه tags را به true تنظیم کنید:
برچسبگذاری با جعبههای انتخاب چندگانه
برچسبگذاری میتواند در جعبههای انتخاب چندگانه نیز استفاده شود. در مثال زیر، ویژگی multiple="multiple" را روی یک کنترل Select2 که گزینه tags: true نیز فعال شده است، تنظیم کردهایم:
پلیسِت انتخابی تکمقداری
Select2 از نمایش یک مقدار پلیسِت با استفاده از گزینه پیکربندی placeholder پشتیبانی میکند. مقدار پلیسِت تا زمانی که انتخابی انجام شود نمایش داده میشود.
پلیسِتهای چندمقداری
برای انتخاب چندمقداری، شما باید هیچوقت عنصر <option> خالی نداشته باشید:
پلیسِتهای انتخاب پیشفرض
به طور جایگزین، مقدار گزینه placeholder میتواند یک شیء داده باشد که یک انتخاب پیشفرض را نشان دهد (<option>). در این حالت، id شیء داده باید با value انتخاب پیشفرض مطابقت داشته باشد.
سفارشیسازی نحوه تطابق نتایج
وقتی کاربران با وارد کردن کلمات جستجو در جعبه جستجو نتایج را فیلتر میکنند، Select2 از یک "مچکننده" داخلی برای تطابق کلمات جستجو با نتایج استفاده میکند. شما میتوانید نحوه تطابق کلمات جستجو را با تعیین یک callback برای گزینه پیکربندی matcher سفارشیسازی کنید.
تطابق گزینههای گروهبندیشده
فقط اشیاء سطح اول به callback matcher ارسال خواهند شد. اگر با دادههای تو در تو کار میکنید، باید از طریق آرایه children پیمایش کرده و آنها را به طور جداگانه تطابق دهید. این امکان تطابق پیشرفتهتر را هنگام کار با اشیاء تو در تو فراهم میکند و به شما این امکان را میدهد که آنها را به هر شکلی که میخواهید مدیریت کنید.
حداقل طول کلمه جستجو
شما میتوانید با استفاده از گزینه minimumInputLength یک حداقل طول برای کلمات جستجو تعیین کنید:
حداکثر طول کلمه جستجو
شما میتوانید با استفاده از گزینه maximumInputLength طول حداکثر کلمات جستجو را محدود کنید:
افزودن گزینههای جدید به صورت برنامهنویسی
گزینههای جدید میتوانند به کنترل Select2 به طور برنامهنویسی اضافه شوند با ایجاد یک شیء Javascript از نوع Option و اضافه کردن آن به کنترل:
ایجاد در صورت عدم وجود
شما میتوانید از .find برای انتخاب گزینه استفاده کنید اگر قبلاً وجود داشته باشد و در غیر این صورت آن را ایجاد کنید:
استفاده از انتخابگر jQuery
آیتمهای انتخابشده نیز میتوانند از طریق انتخابگر :selected در jQuery دسترسی پیدا کنند:
پشتیبانی از RTL
Select2 در سایتهای راستچین (RTL) کار خواهد کرد اگر ویژگی dir روی <select> یا هر یک از والدین آن تنظیم شده باشد. شما همچنین میتوانید Select2 را با گزینه پیکربندی dir: "rtl" مقداردهی اولیه کنید.
از بین بردن کنترل Select2
متد destroy ویجت Select2 را از عنصر هدف حذف میکند. این ویجت به یک کنترل select استاندارد باز میگردد:
باز کردن کشو
Select2 وقتی که اقدامات مختلفی با استفاده از کامپوننت انجام میشود، رویدادهای مختلفی را فعال میکند که به شما امکان اضافه کردن هوکهای سفارشی و انجام اقدامات را میدهد.
باز و بسته کردن کشو
Select2 وقتی که اقدامات مختلفی با استفاده از کامپوننت انجام میشود، رویدادهای مختلفی را فعال میکند که به شما امکان اضافه کردن هوکهای سفارشی و انجام اقدامات را میدهد.
متدهای Select2
Select2 چندین متد داخلی دارد که کنترل برنامهنویسی کامپوننت را امکانپذیر میکند.
متدهای Select2
Select2 چندین متد داخلی دارد که کنترل برنامهنویسی کامپوننت را امکانپذیر میکند.