50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

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

  • منتشر شده در تاریخ

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۱۱)

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

  1. سعید ۲۷ شهریور ۱۳۹۹

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

    پاسخ
    1. حسن شفیعی ۲۷ شهریور ۱۳۹۹

      سورس این پست قابل دانلود هست و همچنین کدی که قرار گرفته همان سورس کامل هست

      پاسخ
      1. سعید ۲۷ شهریور ۱۳۹۹

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

        پاسخ
      2. حسن شفیعی ۲۷ شهریور ۱۳۹۹

        ابتدا فایل رو باید به .php تغییر بدید و در اول کد قبل از تگ html تگ

        پاسخ
      3. سعید ۲۸ شهریور ۱۳۹۹

        سلام
        با عرض معذرت متن پاسخ شما کامل نشده و یه لطف میتونید بکنید من سورس رو برای شما بفرستم با کد php و شما زحمتش رو بکشید؟

        پاسخ
      4. حسن شفیعی ۲۸ شهریور ۱۳۹۹

        سلام.
        اگر پروژه تجاری هست و این قابلیت رو میخوایید اضافه کنید میتونید به ایمیل netparadis.com@gmail.com ارسال کنید تا با هزینه خدمت شما انحام و ارسال بشه

        پاسخ
      5. سعید ۲۸ شهریور ۱۳۹۹

        سلامی دوباره
        مشکل رو حل کردم. فقط یه مشکل دیگه
        چظوری میتونم نامی براش بذارم تا با post ارسال بشه
        خودم name=”name” گذاشتم ولی بازم نتونستم استخراجش بکنم با بقیه متغیر ها
        و البته اینم بگم نه پروژه تجاری نیست و دارم برای تمرین اینکار رو انجام میدم
        و تشکر از پاسخگویی های شما و سایت خوبتون

        پاسخ
      6. حسن شفیعی ۲۹ شهریور ۱۳۹۹

        سلام.
        به تگ select که یه name=’country’ اختصاص دادید باید در سمت php بصورت $_POST[‘country’] مقدار رو دریافت کنید.
        البته کل تگ رو باید داخل تگ form با یک دکمه سابمیت قرار بدید و متد post و action هم که فایل php رو ست کنید
        https://netparadis.com/php-tutorial-15-get-post-methods
        https://netparadis.com/access-form-data-from-php

        پاسخ
      7. سعید ۳۱ شهریور ۱۳۹۹

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

        پاسخ
      8. حسن شفیعی ۳۱ شهریور ۱۳۹۹

        سلام. باید ببینید که مشکل اصلی چی هست یعنی در کنسول مرورگر با زدن f12 ببینید یا اینکه پلاگین تقویم رو تغییر بدید یا در مورد هردو در گوگل جستجو کنید.

        پاسخ
      9. سعید ۲۷ شهریور ۱۳۹۹

        راستی یادم رفت بگم من با sql کار میکنم و php

        پاسخ
دوره های آموزشی