جستجو یکی از قابلیت های پرکاربرد برای لیست های آبشاری HTML است. بخصوص که باعث افزایش نرخ تبدیل کاربر برای انتخاب لیست های طولانی می شود.
در این آموزش, ما یک لیست آبشاری به همراه قابلیت جستجو را ایجاد می کنیم. در آموزش jQuery قبلی, انتخاب استان را با Ajax دیدم.
ما لیستی از آیتم ها در یک آرایه جاوااسکریپت را داریم. از کتابخانه select2 جی کوئری برای ذخیره این لیست و نمایش آن بصورت لیست آبشاری به همراه جستجو بهره می بریم.
Select2 یک پلاگین تمام عیار و غنی برای المان های انتخاب است. این پلاگین نه تنها ظاهر جدیدی به المان های شما می بخشد بلکه با کمک مجموعه ای از قابلیت های کاربردی اضافه بر سازمان، آن را بیش از پیش گسترش می دهد
ساخت جعبه کشویی جستجو با Select2
این کد شامل یک المنت select به همراه مقدار id مشخص شده است. با استفاده از این id ما تابع select2 را برای نمایش لیست آبشاری به همراه باکس جستجو, فراخوانی می کنیم.
زمانی که این تابع فراخوانی می شود, ما لیست آرایه ای کشورها را در قالب data پاس می دیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<html> <head> <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var country = ["Australia", "Bangladesh", "Denmark", "Hong Kong", "Indonesia", "Netherlands", "New Zealand", "South Africa"]; $("#country").select2({ data: country }); }); </script> </head> <body> <h1>DropDown with Search using jQuery</h1> <div> <select id="country" style="width:300px;"> <!-- Dropdown List Option --> </select> </div> </body> </html> |
همچنین میتوانستیم داده ها مثل لیست کشور یا استان را از دیتابیس یا هر محل ذخیره سازی دیگری بصورت داینامیک فراخوانی کنیم.
آپشن های زیادی به هنگام ساخت جعبه کشویی جستجو با Select2 می توانستید اضافه کنید . بطور مثال, می توانیم حداقل تعداد کاراکترهای ورودی را که برای جستجو تایپ شود را مشخص کنیم.
امیدوارم از آموزش ساخت جعبه کشویی جستجو با Select2 نهایت استفاده را برده باشید .
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید.
سلام وقت بخیر
کتابخانه هاش رو چطور میتونم داشته باشم؟
من تو محیط ویژوال استودیو کد میزنم و جایی به اسم stylesheet ندارم
سلام.ممنون.
از یه نوت پد ساده هم میتونید استفاده کنید و اد کنید
میتونید از باکس دانلود هم دریافت و مستقیم استفاده کنید.
با سلام
تشکر از مطالب اموزشی شما
اگه میشه این لیست کشویی قابل جستجو را با قابلیت خواندن از دیتابیس هم فایلش رو بگذارید
ممنون میشم
سورس این پست قابل دانلود هست و همچنین کدی که قرار گرفته همان سورس کامل هست
متشکر
درسته. اون سورس رو دانلود کردم ولی من مبتدی هستم و نمیتونم تغییرش بدم که از دیتا بیس بخونه.
لطفا راهنمایی کنید با یک جدول فرضی از دیتابیس چطور میشه این سورس را تغییر داد تا لیست قابل جستجو داشته باشیم
ابتدا فایل رو باید به .php تغییر بدید و در اول کد قبل از تگ html تگ
سلام
با عرض معذرت متن پاسخ شما کامل نشده و یه لطف میتونید بکنید من سورس رو برای شما بفرستم با کد php و شما زحمتش رو بکشید؟
سلام.
اگر پروژه تجاری هست و این قابلیت رو میخوایید اضافه کنید میتونید به ایمیل netparadis.com@gmail.com ارسال کنید تا با هزینه خدمت شما انحام و ارسال بشه
سلامی دوباره
مشکل رو حل کردم. فقط یه مشکل دیگه
چظوری میتونم نامی براش بذارم تا با post ارسال بشه
خودم name=”name” گذاشتم ولی بازم نتونستم استخراجش بکنم با بقیه متغیر ها
و البته اینم بگم نه پروژه تجاری نیست و دارم برای تمرین اینکار رو انجام میدم
و تشکر از پاسخگویی های شما و سایت خوبتون
سلام.
به تگ 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
سلامی دوباره
تشکر
مشکل من حل شد و تونستم کار بکنم با لیست.
ولی یه مشکل جدید پیدا کردم
این لیست با تقویمی که تو صفحه گذاشتم برای گرفتن تاریخ، تداخل داره
هر کدوم که اخری باشه کار میکنه (البته تو قسمت head)
اگه راهی داره لطف کنید و اگه نه که بین یکی از این دو تا باید یکیش رو انتخاب کنم.
در هر صورت از وقتی که گذاشتید ممنون
سلام. باید ببینید که مشکل اصلی چی هست یعنی در کنسول مرورگر با زدن f12 ببینید یا اینکه پلاگین تقویم رو تغییر بدید یا در مورد هردو در گوگل جستجو کنید.
راستی یادم رفت بگم من با sql کار میکنم و php