ابزار Select2 و مثالهای کاربردی برای آن

20 فروردین 1399

یکی از پرکاربردترین ابزارها در طراحی فرم صفحات وب، کتابخانه Select2 - مبتنی بر جی‌کوئری - است و دراپ‌داون ساده ما را به ابزاری بسیار کاربردی تبدیل می‌کند. در این مقاله با ذکر چندین مثال به بررسی این کتابخانه می‌پردازیم. برای این منظور ابتدا فایل‌های کتابخانه Select2 را به پروژه خود پیوست می‌کنیم که شامل یک فایل javascript و یک فایل css است. تمامی فایل‌ها در سمپل این مقاله وجود دارند.

<script src="select2.min.js"></script>
<link href="select2.min.css" rel="stylesheet" />

مثال زیر را مشاهده کنید:

<html>
<head>
	<meta charset="utf-8">
	<title>Select2</title>
	<script src="jquery.min.js"></script>
	<script src="select2.min.js"></script>
    <link href="select2.min.css" rel="stylesheet" />
	<script>
	$(document).ready(function() {
		$('.my_select').select2();
	});
	</script>
</head>

<body>
	<select class="my_select">
	  <option value="0">گزینه اول</option>
	  <option value="1">گزینه دوم</option>
	</select>
</body>
</html>

همان طور که می‌بینید در مثال فوق، ابتدا کتابخانه‌های jquery و select2 را به پروژه اضافه کرده، سپس یک دراپ داون ساخته‌ایم و خاصیت select2 را به آن افزوده‌ایم:

$('.my_select').select2();

ساخت دراپ‌داون به کمک کتابخانه ذکر شده به همین جا ختم نمی‌شود. در ادامه چند نمونه پرکاربرد و آپشن‌های متداول‌تر آن را بررسی می‌کنیم:

آپشن placeholder (جهت نمایش توضیح برای فیلد):

$('.my_select').select2({placeholder:'فهرست گزینه ها'});

آپشن allowClear (امکان حذف گزینه انتخاب شده):

$('.my_select').select2({allowClear:true});

آپشن tags (امکان نوشتن گزینه جدید در محتوای دراپ‌داون):

$('.my_select').select2({tags:true});

آپشن multiple (امکان انتخاب چند گزینه):

$('.my_select').select2({multiple:true});

آپشن dir (چپ‌چین و راست‌چین کردن):

$('.my_select').select2({dir:'rtl'});

آپشن data (تعریف گزینه‌های دارپ‌داون):

$('.my_select').select2({data:["گزینه اول","گزینه دوم","گزینه سوم"]});

آپشن ajax:
به کمک این خصوصیت می‌توانیم بین دراپ‌داون و پایگاه داده خود پُلی بزنیم. هر زمان که داده‌ها در دیتابیس بروز شدند، دراپ‌داون نیز بدون نیاز به رفرش صفحه، اطلاعات جدید را جستجو کرده و نمایش می‌دهد. حال در قالب یک مثال این ویژگی را بررسی می‌کنیم. یادآوری می‌کنم در بخش دانلود این مقاله مثال جامع‌تری از این ویژگی آورده‌ام.

db.php

<?php
$host     	= "localhost";		//هاست
$user     	= "root";			//نام کاربری
$pass 	= "";				//رمز عبور
$db 	= "my_db";		//نام دیتابیس
$table 	= "my_tbl";		//نام جدول

$dsn	= "mysql:host=$host;dbname=$db;charset=utf8";
$options        = [
	PDO::ATTR_EMULATE_PREPARES   => false, 
	PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION, 
	PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, 
];

try {
	$pdoConn = new PDO($dsn, $user, $pass, $options);
} catch (Exception $e) {
	exit("خطای اتصال");
}
?>

index.php

<html>
<head>
	<meta charset="utf-8">
	<title>Select2</title>
	<script src="jquery.min.js"></script>
	<script src="select2.min.js"></script>
	<link href="select2.min.css" rel="stylesheet" />
</head>

<body>
	<select class="my_select">
	</select>
	
	<script>
	$(function() {	
		$('.my_select').select2({
			placeholder: 'انتخاب گزینه ها',
			ajax: {
				url: "load.php",
				dataType: 'json',
				data: function(params) {
					return {
						q: params.term
					};
				},
				processResults: function(data) {
					return {
						results: $.map(data, function(obj) {
							return { 
								id: obj.id, 
								text: obj.text
							};
						})
					};
				},
				cache: true
			}
		});
	});
	</script>
</body>
</html>

load.php

<?PHP
include("db.php");

$q = $_GET['q'];
$sql = "SELECT * FROM articles WHERE title LIKE '%$q%'";
$stmt = $pdoConn->prepare($sql);
$stmt->execute();
$row = $stmt->fetchAll();  
if($row) {

	for($i=0;$i<count($row);$i++) 
		$json[] = ['id'=>$row[$i]['number'], 'text'=>$row[$i]['title']];
}
echo json_encode($json);
?>

در مثال فوق پس از تعریف کانکشن جهت اتصال به دیتابیس، در فایل index.php یک دراپ‌داون ایجاد کرده‌ایم و خاصیت select2 را به آن افزوده‌ایم. همان‌طور که مشاهده می‌کنید آپشن ajax برای این منظور شامل چند مولفه اصلی است:

گزینه url: مسیر فایلی که با دیتابیس ما در ارتباط است.
گزینه dataType: مقدار این مولفه جهت بازگشت متغیرها از سمت سرور json است
گزینه data: عبارتی که در دراپ‌داون به عنوان جستجو می‌نویسیم توسط پارامتر q به سمت سرور ارسال می‌شود
گزینه processResults: مقدار برگشتی از سمت سرور را می‌توان توسط پارامترهای id (مقدار option) و text (عنوان option) دریافت کرد

چند نکته دیگر

در هنگام استفاده از Select2 دانستن این موارد نیز سودمند است:

الف) مقدارگذاری دراپ‌داون توسط جی‌کوئری

$('.my_select').val('2').trigger('change');

ب) مقدارگذاری دراپ‌داون توسط جی‌کوئری در حالت multiple

var selectedValues = ["1", "2"];
$('.my_select').val(selectedValues).trigger('change');

ج) مقدارگذاری دراپ‌داون توسط جی‌کوئری در حالت ajax

$(".my_select").empty();
$(".my_select").append('<option value="2" selected>گزینه دوم</option>');

د) باز کردن دراپ‌داون توسط فرمان زیر انجام می‌شود

$('.my_select').select2('open');

ه) اگر بخواهیم با روی‌داد «بستن» دراپ‌داون، تابعی صدا زده شود

$('.my_select').on("select2:close", function (e) {
	alert('close');
});

و) اگر بخواهیم با روی‌داد «انتخاب» دراپ‌داون، تابعی صدا زده شود

$('.my_select').on("select2:select", function (e) {
	alert('select');
});

ک) افزودن تصویر و شرح به محتوای دراپ‌داون یا تغییر قالب آن: این ویژگی توسط خاصیت templateResult حاصل می‌شود و همان‌طور که گفتم در بخش «دانلود» این مقاله، پروژه کامل‌تری از آپشن ajax وجود دارد که در آن شما می‌توانید، تصویر و یا هر گزینه دیگری را به دراپ‌داون خود اضافه نمایید.

ابزار Select2 و مثالهای کاربردی برای آن

چند نکته دیگر

دیدگاه ها