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

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

جستجو یکی از قابلیت های پرکاربرد برای لیست های آبشاری 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 نهایت استفاده را برده باشید .

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

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

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