کتابخانه
tom-select یه کتابخانه جاوااسکریپتیه که select معمولی HTML رو به یه کنترل جستجوپذیر و کاربردی تبدیل می کنه. جستجوی زنده، انتخاب چندتایی، ساخت گزینه تازه و گرفتن گزینه ها از سرور رو بدون jQuery بهت می ده و با کیبورد هم مثل select اصلی راحت کار می کنه.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز Apache-2.0؛ هش هر فایل با منبع بررسی شده است.
۱۰۰۷ کیلوبایت · ۹۶ فایل · انتشار
دانلود هفتگی جهانی
۴۴۱٫۴ هزار
هفته ۲۵ مهر تا ۱ آبان۴٫۵٪ بیشتر از هفته قبل
منبع: npmبه‌روزرسانی آمار
SHA-256: 8f9d7d3420e938c2c9817818b56df43ea46feae5bf1f5a2e828863c034df0e37
select معمولی HTML تا وقتی گزینه هاش کمه مشکلی نداره. ولی فرض کن فرم ثبت نام یا تسویه حساب فروشگاهت یه فهرست بلند از شهرها، دسته بندی ها یا کاربرها داره. کاربر باید کل فهرست رو اسکرول کنه تا گزینه مورد نظرش رو پیدا کنه. tom-select برای همین جور جاهاست: بالای فهرست یه کادر جستجو می ذاره و گزینه ها رو همون موقع که تایپ می کنی فیلتر می کنه.
این کتابخانه از Selectize.js جدا شده و مستقل ادامه پیدا کرده. فرقش اینه که jQuery نمی خواد و با جاوااسکریپت خالص کار می کنه. توی سایت وردپرسی که نمی خوای وابستگی اضافه کنی، این امتیاز واقعیه. انتخاب تکی و چندتایی، ساخت گزینه تازه همون جا که کاربر تایپ می کنه (مثل برچسب گذاری) و گرفتن گزینه ها از سرور از کارهاییه که ازش برمی آد. افزونه های داخلیش هم دکمه حذف کنار هر گزینه انتخاب شده یا دکمه پاک کردن همه رو اضافه می کنن. مجوزش از نوع Apache هست و استفاده تجاری معمولاً مشکلی نداره، ولی متن مجوز رو یه بار بخون.
برای کی مناسبه؟ برای توسعه دهنده ای که روی فرم سفارشی، پنل مدیریت، فیلتر محصولات یا صفحه ثبت سفارش کار می کنه. مثلاً انتخاب استان و شهر، انتخاب چند دسته برای یه مطلب یا وارد کردن چند ایمیل. ولی هر جا لازمش نیست. اگه select فقط سه چهار تا گزینه داره، همون select ساده بهتره و سریع تره. tom-select ویرایشگر متن یا فریم ورک فرم هم نیست؛ فقط یه کنترل انتخاب رو کاربردی تر می کنه.
چند تا نکته موقع استفاده کمکت می کنه. tom-select روی select اصلی سوار می شه، پس فرم مثل قبل ارسال می شه و سمت سرور چیزی رو عوض نمی کنی. متن پیامی مثل «نتیجه ای پیدا نشد» و placeholder رو هم می شه فارسی کرد. چون سایت های فارسی راست به چپ هستن، ظاهر کادر، فاصله ها و فونتش رو حتماً با قالب خودت امتحان کن و اگه لازم بود با CSS تنظیمش کن. روی موبایل هم تست بگیر، چون بعضی وقت ها select بومی گوشی تجربه بهتری می ده. وقتی اینترنت بین الملل محدوده، فایل ها رو هم از CDN خارجی نخون و از نسخه روی هاست خودت لود کن. نسخه های رسمی و بدون تغییر tom-select توی مخزن داخلی ما هم هست، پس همون موقع می تونی از اونجا برداری.
استفاده ازش ساده ست و چند قدم بیشتر نداره:
توی وردپرس اسکریپت و استایل رو با wp_enqueue_script و wp_enqueue_style ثبت کن و دستی توی قالب نچسبون. بعدش یه بار فرم رو با کیبورد و روی موبایل امتحان کن.
نه. tom-select با جاوااسکریپت خالص نوشته شده و به jQuery وابسته نیست. این یکی از فرق های اصلیش با Selectize.js هست که ازش جدا شده. پس توی سایتی که jQuery نداره هم می تونی بدون دردسر ازش استفاده کنی.
آره. برای فهرست های بزرگ مثل کاربرها یا محصولات لازم نیست همه گزینه ها از اول توی صفحه باشن. با گزینه load می تونی موقع تایپ کاربر یه درخواست بفرستی و نتیجه رو بگیری. سمت سرور هم باید یه آدرس بسازی که نتیجه جستجو رو برگردونه.
جستجو روی متن فارسی کار می کنه، ولی ظاهر کادر و فاصله ها رو توی قالب راست به چپ خودت حتماً چک کن. ممکنه لازم بشه چند خط CSS بنویسی یا فونت رو دستی تنظیم کنی. پیام های پیش فرض رو هم می شه فارسی کرد.
Select2 به jQuery وابسته ست، ولی tom-select نه. اگه پروژه ت از قبل با Select2 کار می کنه و راضی هستی، لازم نیست عوضش کنی. اگه پروژه جدید می سازی یا نمی خوای jQuery لود بشه، tom-select برای شروع سبک تره.
لازم نیست. اگه select فقط چند تا گزینه داره، همون select ساده سریع تر لود می شه و روی موبایل هم راحت تره. tom-select وقتی به کار می آد که فهرست بلنده، انتخاب چندتایی می خوای یا کاربر باید بین گزینه ها جستجو کنه.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.