Select2 3. 5. 3

Select2 جایگزینی مبتنی بر jQuery برای جعبه های انتخابی است. این پشتیبانی از جستجو ، مجموعه داده های از راه دور و پیمایش نامحدود نتایج پشتیبانی می کند.

تعویض(بارگذاری. )

• بارگذاری.

سازگاری مرورگر

• IE 8+
• Chrome 8+
• فایرفاکس 10+
• سافاری 3+
• اپرا 10. 6+

مثال ها

اصول اولیه

Select2 می تواند یک کادر انتخاب منظم مانند این را بگیرد:

و آن را به:

با پشتیبانی از فیلتر سریع گزینه از طریق کادر جستجو.

رمز نمونه

جعبه های چند ارزش را انتخاب کنید

Select2 همچنین از کادر انتخاب چند ارزش پشتیبانی می کند. انتخاب زیر با ویژگی چندگانه اعلام شده است. Select2 به طور خودکار در این مورد انتخاب می کند:

رمز نمونه

متخلف

مقدار نگهدارنده مکان را می توان تعریف کرد و تا زمانی که انتخابی انجام نشود نمایش داده می شود:

نگهدارنده مکان را می توان از طریق یک ویژگی نگهدارنده داده متصل به SELECT یا از طریق عنصر پیکربندی مکان نگهدارنده همانطور که در کد مثال مشاهده می شود ، اعلام کرد.

هنگامی که از مکان نگهدارنده برای کادر انتخاب غیرقانونی استفاده می شود ، نیاز دارد که یک برچسب خالی را به عنوان اولین گزینه خود درج کنید.

به صورت اختیاری ، یک دکمه شفاف (پس از انتخاب انتخاب) قابل مشاهده است تا دوباره کادر انتخاب را به مقدار محل نگهدارنده بازگرداند.

رمز نمونه

حداقل ورودی

Select2 از یک تنظیم ورودی حداقل پشتیبانی می کند که برای مجموعه داده های بزرگ از راه دور که در آن اصطلاحات جستجوی کوتاه بسیار مفید نیستند ، مفید است:

رمز نمونه

الگو

گزینه های مختلف نمایشگر از مؤلفه Select2 قابل تغییر است:

رمز نمونه

شما می توانید ویژگی های داده را روی (یا) تنظیم کرده و از آنها در توابع قالب بندی استفاده کنید:

بارگیری داده ها

Select2 از یک تابع برای بارگیری داده های نتیجه استفاده می کند. در اینجا یک مثال بی اهمیت است که گزینه هایی را ایجاد می کند که شامل ورودی کاربر چندین بار تکرار شده است:

برای استفاده از بارگیری داده های سفارشی Select2 باید به برچسب ورودی نوع = "پنهان" وصل شود ، در غیر این صورت داده ها از برچسب های گزینه Select جدا می شوند.

رمز نمونه

حداکثر اندازه انتخاب

Select2 به توسعه دهنده اجازه می دهد تا تعداد مواردی را که می توانند در یک کنترل چند انتخابی انتخاب کنند ، محدود کند. در مثال زیر فقط 3 مورد یا کمتر مورد انتخاب قرار می گیرد.

رمز نمونه

بارگیری داده های آرایه

Select2 برخی از میانبرها را فراهم می کند که دسترسی به داده های محلی ذخیره شده در یک آرایه را به جای نیاز به نوشتن یک عملکرد پرس و جو ذکر شده در مثال بالا ، آسان می کند.

مثال زیر با مشخص کردن یک آرایه در عنصر داده ، داده ها را وارد می کند. موارد موجود در چنین آرایه ای باید دارای کلیدهای شناسه و متن باشد.

اگر داده های شما کلید متنی ندارند ، یک کلید جایگزین را می توان به عنوان یک رشته مشخص کرد:

یا به عنوان یک تابع:

داده ها همچنین می توانند خود تابعی باشند که یک شیء نتایج را برمی گرداند:

رمز نمونه

بارگیری داده های از راه دور

Select2 با پشتیبانی AJAX/JSONP ساخته شده است. در این مثال ما با استفاده از API GitHub ، مخازن را جستجو خواهیم کرد:

اگر این مثال کار را متوقف کند ، به احتمال زیاد به حد استفاده برای API جستجوی GitHub از 5 درخواست در دقیقه رسیده اید. لطفاً چند دقیقه صبر کنید و دوباره امتحان کنید.

رمز نمونه

Select2 از تابع $ $ $ $ $ $ برای اجرای تماس از راه دور به طور پیش فرض استفاده می کند. یک عملکرد حمل و نقل جایگزین را می توان در تنظیمات AJAX مشخص کرد ، یا با ارائه یک عملکرد پرس و جو سفارشی به جای استفاده از یاور AJAX ، می توان یک اجرای کاملاً سفارشی ساخته شد.

پیمایش بی نهایت با داده های از راه دور

SELECT2 هنگامی که لیست نتیجه به پایان می رسد ، از نتایج تنبل از نتایج پشتیبانی می کند. برای فعال کردن سرویس از راه دور باید از نوعی مکانیسم صفحه بندی پشتیبانی کند و عملکرد پرس و جو داده شده به Select2 باید از آن استفاده کند. مثال زیر نشان می دهد که چگونه می توان این کار را تنظیم کرد. برخی از کلمات کلیدی را جستجو کنید و سپس لیست نتیجه را تا انتها جستجو کنید تا نتایج بیشتر بارگذاری کنید:

اگر این مثال کار را متوقف کند ، به احتمال زیاد به حد استفاده برای API جستجوی GitHub از 5 درخواست در دقیقه رسیده اید. لطفاً چند دقیقه صبر کنید و دوباره امتحان کنید.

رمز نمونه

دسترسی برنامه ای

SELECT2 از روش هایی پشتیبانی می کند که امکان کنترل برنامه ای از مؤلفه را فراهم می کند:

رمز نمونه

مناسبت ها

هر زمان که مقدار آن توسط کاربر تغییر کند ، رویداد تغییر بر روی عنصر اصلی ایجاد می شود

رویداد باز بر روی عنصر اصلی هر زمان که نیاز به افتتاحیه داشته باشد انجام می شود:

گزارش رویداد

رمز نمونه

پشتیبانی از برچسب زدن

Select2 می تواند برای تنظیم سریع زمینه های مورد استفاده برای برچسب زدن استفاده شود.

توجه داشته باشید که هنگام فعال کردن برچسب زدن ، کاربر می تواند از برچسب های از قبل موجود انتخاب کند یا با انتخاب اولین انتخابی که کاربر تاکنون در کادر جستجو تایپ کرده است ، یک برچسب جدید ایجاد کند.

رمز نمونه

حداکثر طول ورودی

Select2 را می توان محدودیتی در تعداد کاراکترهایی که می توانند در هر برچسب وارد شوند ، تعیین کرد.

شما قادر به ورود بیش از 10 کاراکتر نخواهید بود.

رمز نمونه

نشان خودکار

Select2 از توانایی اضافه کردن گزینه ها به طور خودکار پشتیبانی می کند زیرا کاربر در قسمت جستجو تایپ می کند. این امر به ویژه در برچسب زدن USECase مناسب است که کاربر می تواند با جدا کردن آنها با کاما یا یک فضا ، به سرعت تعدادی از برچسب ها را وارد کند. سعی کنید در قسمت جستجوی زیر تایپ کنید و وارد یک فضا یا کاما شوید.

توجه داشته باشید که جداکننده ها در گزینه TokenseParators تعریف شده اند.

توجه داشته باشید که در این مثال از عملکرد Tokenizer ساخته شده است ، اما یک سفارشی را می توان در گزینه ها ارائه داد.

رمز نمونه

واکنش به تغییرات ارزش خارجی

Select2 می تواند به تغییرات مقدار خارجی واکنش نشان دهد و انتخاب خود را همگام نگه دارد. این ویژگی به Select2 اجازه می دهد تا با فریم ورک های جلویی که از اتصال داده ها بین اجزای رابط کاربری و مقادیر مدل استفاده می کنند، یکپارچه کار کند.

این ویژگی تنها زمانی در دسترس است که تابع initSelection() در گزینه ها ارائه شده باشد. این تابع برای نگاشت شناسه انتخابی تنظیم شده روی عنصر به اشیاء مورد استفاده Select2 مورد نیاز است. این عملکرد به طور پیش فرض تنظیم می شود که Select2 به یک انتخاب متصل شود یا وقتی از تابع کمکی برچسب ها استفاده می شود.

رمز نمونه

انتخاب 2 چرخه حیات

رمز نمونه

انتخاب کنید2 مرتب سازی را بکشید و رها کنید

Select2 از مرتب سازی کشیدن و رها کردن گزینه های انتخاب شده پشتیبانی می کند. Select2 به خودی خود کد لازم را برای انجام کشیدن و رها کردن ارائه نمی دهد، در عوض قلاب هایی را فراهم می کند که کتابخانه های دیگر می توانند برای ارائه رفتار استفاده کنند. در این مثال ما از پلاگین sortable() JQuery UI استفاده می کنیم.

مرتب سازی فقط زمانی در دسترس است که Select2 به یک فیلد ورودی مخفی متصل شده باشد.

رمز نمونه

2 حالت غیرفعال را انتخاب کنید

رمز نمونه

تطبیق سفارشی

برخلاف سایر کشویی های موجود در این صفحه، این یکی تنها در صورتی با گزینه ها مطابقت دارد که عبارت در ابتدای رشته به جای هر جایی ظاهر شود:

کشویی زیر با ویژگی های سفارشی تگ گزینه مطابقت دارد. به عنوان مثال، گزینه "آبی" را می توان با وارد کردن "آبی" یا "فیروزه ای" مطابقت داد:

رمز نمونه

مرتب سازی نتایج نمایش داده شده

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

رمز نمونه

طراحی پاسخگو - درصد عرض

عرض Select2 را می توان روی درصدی از والد آن تنظیم کرد تا از طراحی واکنشگرا پشتیبانی کند. دو کادر Select2 زیر به ترتیب 50% و 75% عرض دارند.

Select2 تمام تلاش خود را برای حل درصد عرض مشخص شده از طریق یک کلاس css انجام می دهد، اما همیشه امکان پذیر نیست. بهترین راه برای اطمینان از اینکه Select2 از یک عرض مبتنی بر درصد استفاده می کند این است که اعلان سبک را در تگ قرار دهید.

رمز نمونه

گزینه های غیرفعال

در صورتی که نیاز دارید برخی از گزینه ها را غیرفعال کنید تا نتوانند توسط رابط select2 انتخاب شوند، اکنون می توانید با داده های خود غیرفعال: true را ارسال کنید. لطفاً توجه داشته باشید: این برای مقادیر ورودی از ajax نیز کار می کند. هنگامی که به یک عنصر متصل می شود، Select2 به ویژگی غیرفعال عناصر آن احترام می گذارد.

رمز نمونه

قفل انتخاب ها

در صورتی که شما نیاز به قفل کردن برخی از انتخاب های خاص داشته باشید تا آنها با رابط Select2 از بین نرود ، اکنون می توانید در Locked: با داده های خود درست کنید. لطفاً توجه داشته باشید: این همچنین برای مقادیر ورودی از AJAX کار می کند.

رمز نمونه

Diacritics پشتیبانی می کند

Matcher پیش فرض Select2 Diacritics را نادیده می گیرد و باعث می شود کاربران بتوانند نتایج را در انتخاب های بین المللی فیلتر کنند."Aero" را در انتخاب زیر تایپ کنید:

مستندات

سازنده

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

برای مخفی کردن دائمی قسمت جستجو ، می توان گزینه را روی یک مقدار منفی تنظیم کرد.

فقط در مورد جعبه های انتخاب یک ارزش اعمال می شود

حداکثر تعداد مواردی که می توانند در یک کنترل چند انتخاب انتخاب شوند. اگر این تعداد کمتر از 1 انتخاب محدود نباشد.

پس از رسیدن تعداد موارد انتخاب شده به حداکثر مشخص شده ، محتوای کشویی توسط عملکرد FormatSelectionTooBig جمع می شود.

در صورت عدم انتخاب دیگری ، مقدار اولیه انتخاب شده است.

نگهدارنده مکان همچنین می تواند به عنوان یک ویژگی نگهدارنده داده در عنصر انتخاب یا ورودی که Select2 به آن وصل شده است ، مشخص شود.

توجه داشته باشید که از آنجا که مرورگرها فرض می کنند عنصر گزینه اول در جعبه های انتخاب غیر Multi-Value انتخاب شده است ، یک عنصر گزینه اول خالی باید () برای کار نگهدارنده ارائه شود.

هنگامی که به یک انتخاب وصل شده ، گزینه ای را که باید به عنوان نگهدارنده محل استفاده شود ، حل می کند. می تواند یک تابعی باشد که با توجه به عنصر انتخابی باید عنصر گزینه یا یک رشته را ابتدا برگرداند تا نشان دهد که باید از گزینه اول استفاده شود.

این گزینه در صورتی که پیش فرض Select2 در استفاده از گزینه اول فقط در صورتی که ارزش نداشته باشد و متنی مناسب نباشد ، مفید است.

شخصیت جداکننده یا رشته مورد استفاده برای محدود کردن شناسه ها در ویژگی ارزش SELECTS چند ارزشی. تعیین کننده پیش فرض شخصیت است.

این که آیا یک دکمه روشن هنگام انتخاب کادر انتخابی نمایش داده می شود یا خیر. این دکمه ، در صورت کلیک ، مقدار کادر انتخاب را دوباره به محل نگهدارنده تنظیم می کند ، بنابراین این گزینه فقط در صورت مشخص شدن محل نگهدارنده در دسترس است.

این گزینه فقط در صورت مشخص شدن محل نگهدارنده کار می کند.

هنگامی که به یک گزینه انتخاب شده با یک مقدار خالی وصل شده است ، باید ارائه شود. این گزینه ای است که هنگام فشار دادن دکمه انتخاب می شود زیرا یک کادر انتخابی حداقل به یک گزینه انتخاب نیاز دارد.

همچنین ، توجه داشته باشید که این گزینه فقط با انتخاب های مبتنی بر ارزش غیر متبحر کار می کند زیرا انتخاب های چند ارزش همیشه چنین دکمه ای را برای هر گزینه انتخاب شده فراهم می کنند.

آیا Select2 اجازه می دهد تا مقادیر چندگانه را انتخاب کند.

هنگامی که Select2 به یک عنصر انتخاب شده وصل شود ، این مقدار نادیده گرفته می شود و به جای آن از ویژگی های چندگانه انتخاب می شود.

اگر روی False تنظیم شود ، کشویی پس از انجام انتخاب بسته نمی شود و امکان انتخاب سریع چندین مورد را فراهم می کند. به طور پیش فرض این گزینه روی True تنظیم شده است.

فقط در صورت پیکربندی در حالت چند انتخابی اعمال می شود.

در صورت تنظیم True ، کشویی هنگام فشار کاربر کلید Enter را فشار داده و Select2 بسته است. به صورت پیش فرض این گزینه فعال است.

اجرای پیش فرض انتظار دارد که شیء دارای یک ویژگی متنی باشد که برگردانده شود.

این اجرای ممکن است عناصر را مستقیماً به شیء کانتینر ارائه شده اضافه کند ، یا یک مقدار واحد را برگرداند و به طور خودکار ضمیمه شود.

هنگامی که به یک عنصر اصلی (یا) وصل می شوید ، از طریق ویژگی خاصیت در داخل تابع مشخص شده قابل دسترسی است.

اجرای پیش فرض انتظار دارد که شیء دارای یک ویژگی متنی باشد که برگردانده شود.

این اجرای ممکن است عناصر را مستقیماً به شیء کانتینر ارائه شده اضافه کند ، یا یک مقدار واحد را برگرداند و به طور خودکار ضمیمه شود.

هنگامی که به یک عنصر اصلی (یا) وصل می شوید ، از طریق ویژگی خاصیت در داخل تابع مشخص شده قابل دسترسی است.

به طور پیش فرض هنگام اتصال به کلاس های CSS انتخابی از گزینه S به طور خودکار کپی می شود.

برای اطلاعات بیشتر در مورد پارامترها ، به اسناد API jQuery مراجعه کنید.

در صورت استفاده در ترکیب با ورودی [نوع = پنهان] باید از برچسب مراقبت استفاده شود تا ویژگی شناسه شیء انتخاب ، به ویژه سلب کردن ، از آنجا که به عنوان جداکننده ارزش استفاده می شود ، استفاده شود.

یک تابع سفارشیبه عنوان مثال اگر می خواهید مورد جدید را در موقعیت دوم وارد کنید:

Essentially this is an id>عملکرد نقشه برداری شی.

این عملکرد فقط در صورتی که ورودی اولیه برای پردازش وجود داشته باشد ، فراخوانی می شود.

Tokenizer فقط در مورد چند انتخابی اعمال می شود.

برای اینکه این عملکرد کار کند Select2 به جای انتخاب ، باید به یک برچسب ورودی نوع = "پنهان" وصل شود.

داده های نمونه

به عنوان مثال داده های سلسله مراتبی

برای اینکه این عملکرد کار کند Select2 به جای انتخاب ، باید به یک برچسب ورودی نوع = "پنهان" وصل شود.

برای مستند سازی قالب داده ، به عملکرد پرس و جو مراجعه کنید.

اگر این عنصر حاوی یک آرایه باشد ، هر عنصر در آرایه باید حاوی کلیدهای شناسه و متن باشد.

از طرف دیگر ، این عنصر را می توان به عنوان یک شیء مشخص کرد که در آن کلید نتایج باید داده ها را به عنوان یک آرایه در اختیار داشته باشد و یک کلید متن می تواند نام کلید در موارد داده باشد که حاوی متن است یا تابعی که متن را با توجه به یک عنصر داده بازیابی می کنداز آرایه

تابعی که برای نشانه گذاری پس از فرآیند استفاده می شود از توابع فرمت بازگردانده می شود. به طور پیش فرض ، این عملکرد برای جلوگیری از تزریق جاوا اسکریپت از اشخاص HTML فرار می کند.

اگر می خواهید SELECT2 گزینه برجسته ای را که در حال حاضر تار شده است انتخاب کنید ، روی True تنظیم کنید.

تابع مورد استفاده برای تعیین اصطلاح جستجوی بعدی باید باشد.

در اینجا یک نمونه اجرا برای نمایش اصطلاح جستجوی فعلی هنگام باز شدن کشویی استفاده شده است:

عملکرد می تواند هنگامی که کشویی در حالت تک و چند انتخاب پیکربندی شده است ، استفاده شود. پس از انتخاب یک مورد شروع می شود. در حالت منفرد نیز پس از انتخابات (در صورت ارائه) شروع می شود.

انتخاب را می گیرد یا تنظیم می کند. اگر پارامتر مقدار مشخص نشده باشد ، ویژگی شناسه عنصر انتخاب شده در حال حاضر بازگردانده می شود. اگر پارامتر مقدار مشخص شود ، به انتخاب فعلی تبدیل می شود.

روش وال که در یک انتخاب تک با یک مقدار UNSET فراخوانی شده است "" "" ، در حالی که یک روش VAL که بر روی یک چند انتخاب خالی فراخوانی شده است ، برمی گردد [].

توجه داشته باشید که برای استفاده از این روش باید عملکرد initsection را در گزینه ها تعریف کنید ، بنابراین Select2 می داند چگونه شناسه شی را که در Val () منتقل می کنید به شیء کامل مورد نیاز برای انتخاب انتخاب تبدیل کنید. اگر به یک عنصر انتخابی وصل می شوید ، این عملکرد قبلاً برای شما ارائه شده است.

انتخاب را می گیرد یا تنظیم می کند. مشابه روش VAL ، اما به جای شناسه با اشیاء کار می کند.

روش داده هایی که در یک انتخاب تک با یک مقدار UNSET فراخوانی شده است ، تهی را برمی گرداند ، در حالی که یک روش داده ای که در یک انتخاب چند منتخب مورد استفاده قرار می گیرد ، باز می گردد [].

از بین رفتن

تغییرات را در DOM انجام شده توسط Select2 بازگرداند. هر انتخاب انجام شده از طریق Select2 حفظ خواهد شد.