طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

ساخت جعبه کشویی جستجو با Select2


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

در این آموزش, ما یک لیست آبشاری به همراه قابلیت جستجو را ایجاد می کنیم. در آموزش jQuery قبلی, انتخاب استان را با Ajax دیدم.

ما لیستی از آیتم ها در یک آرایه جاوااسکریپت را داریم. از کتابخانه select2 جی کوئری برای ذخیره این لیست و نمایش آن بصورت لیست آبشاری به همراه جستجو  بهره می بریم.

ساخت جعبه کشویی جستجو با Select2

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

ساخت جعبه کشویی جستجو با Select2

این کد شامل یک المنت select به همراه مقدار id مشخص شده است. با استفاده از این id ما تابع select2 را برای نمایش لیست آبشاری به همراه باکس جستجو, فراخوانی می کنیم.

زمانی که این تابع فراخوانی می شود, ما لیست آرایه ای کشورها را در قالب data پاس می دیم.

همچنین میتوانستیم داده ها مثل لیست کشور یا استان را از دیتابیس یا هر محل ذخیره سازی دیگری بصورت داینامیک فراخوانی کنیم.

حتما بخوانید  ساخت لیست آبشاری به همراه چک باکس با jQuery

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

 

امیدوارم از آموزش ساخت جعبه کشویی جستجو با Select2 نهایت استفاده را برده باشید .

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

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

موفق و پیروز باشید.

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

دیدگاه کاربران

دیدگاهتان را بنویسید

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

جدیدترین آموزش های آنلاین



دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

افزایش امنیت سایت

مجوزهای ما


logo-samandehi نماد اعتماد الکترونیک

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

دانلود کتاب

عضویت در خبرنامه