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

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

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

دسته بندی : آموزش jQuery ۲۳ اردیبهشت ۱۳۹۷ 485 بازدید

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

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

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

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

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

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

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

<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>

<html>

<head>

$(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>

</div>

</body>

</html>

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

حتما بخوانید تیک زدن همه چک باکس ها با jQuery

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

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

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

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

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

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

<< انتخابگر رنگ در جی کوئری (Color Picker) اسلاید متن روی عکس با jQuery >>

دانلــود بـاکـــس

لینک های دانلود به ایمیل شما ارسال می شود

لینک دانلود را همین الان برام ارسال کن

با عضویت در سایت می توانید تمامی فایل ها را به صورت مستقیم دانلود کنید

حسن شفیعی

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

راه آسان تری برای ارتباط با کاربران مان پیدا کردیم کانال تلگرام نت پارادیس