آموزش جامع Select2

📚معرفی و نصب

Select2 یک jQuery Plugin است که المان‌های <select> معمولی را به Dropdown‌های پیشرفته با جستجو، چند انتخابی، گروه‌بندی و بارگذاری Ajax تبدیل می‌کند.

نصب

<!-- ۱. jQuery (اجباری) -->
<script src="jquery.min.js"></script>

<!-- ۲. Select2 CSS -->
<link rel="stylesheet" href="css/select2.min.css">

<!-- ۳. Select2 JS -->
<script src="js/select2.min.js"></script>

فعال‌سازی

// ساده‌ترین روش
$('select').select2();

// با تنظیمات کامل
$('#my-select').select2({
  placeholder:  'یک گزینه انتخاب کنید...',
  allowClear:   true,  // دکمه × برای پاک کردن
  dir:          'rtl', // راست به چپ
  width:        '100%'
});

🔍Select پایه با جستجو

$('#city').select2({
  placeholder:  'شهر را انتخاب کنید...',
  allowClear:   true,
  dir:          'rtl',
  width:        '100%'
});

🏷چند انتخابی و Tags

// Multiple — چند گزینه از لیست
$('#skills').select2({
  placeholder: 'مهارت‌ها را انتخاب کنید...',
  dir: 'rtl',
  maximumSelectionLength: 5  // حداکثر ۵ گزینه
});

// Tags — ورودی آزاد + Enter
$('#keywords').select2({
  tags: true,
  tokenSeparators: [',', ' '],  // جدا کردن با کاما یا فاصله
  placeholder: 'کلمه کلیدی وارد کنید...',
  dir: 'rtl'
});

📁گروه‌بندی گزینه‌ها

<!-- HTML با optgroup -->
<select id="lang">
  <option></option>
  <optgroup label="Frontend">
    <option value="js">JavaScript</option>
    <option value="ts">TypeScript</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="python">Python</option>
  </optgroup>
</select>

// JavaScript — مثل همیشه
$('#lang').select2({ placeholder: 'زبان انتخاب کنید...', dir: 'rtl' });

📋داده محلی (Local Data)

به جای <option> های HTML، می‌توان داده را از یک آرایه JavaScript به Select2 داد:

// آرایه ساده
var cities = [
  { id: 1, text: 'تهران' },
  { id: 2, text: 'اصفهان' },
  { id: 3, text: 'مشهد' }
];
$('#s2-local').select2({ data: cities, placeholder: 'جستجو...', dir: 'rtl' });

// با اطلاعات اضافه (data customization)
var users = [
  { id: 1, text: 'علی محمدی', role: 'Admin',    avatar: '👤' },
  { id: 2, text: 'سارا رضایی', role: 'Editor',  avatar: '👤' },
];

// جستجو در داده‌های محلی با matcher
$('#s2-local').select2({
  data: users,
  matcher: function(params, data) {
    if (!params.term) return data;
    if (data.text.toLowerCase().includes(params.term.toLowerCase()))
      return data;
    return null;
  }
});

🌐Ajax Search

$('#user-select').select2({
  ajax: {
    url:      '/api/search-users',
    dataType: 'json',
    delay:    250,    // تأخیر بعد از توقف تایپ
    data: function(params) {
      return {
        q:    params.term,
        page: params.page || 1
      };
    },
    processResults: function(data, params) {
      return {
        results: data.items.map(function(item) {
          return { id: item.id, text: item.name };
        }),
        pagination: { more: data.hasMore }
      };
    },
    cache: true
  },
  minimumInputLength: 2,  // حداقل ۲ کاراکتر برای جستجو
  placeholder: 'نام کاربر را جستجو کنید...',
  dir: 'rtl'
});

شبیه‌سازی Ajax با داده‌ محلی

// شبیه‌سازی Ajax با transport سفارشی
$('#s2-ajax-sim').select2({
  ajax: {
    transport: function(params, success, failure) {
      var filtered = localUsers.filter(function(u) {
        return u.text.includes(params.data.q || '');
      });
      setTimeout(function() {
        success({ results: filtered });
      }, 300);  // شبیه‌سازی تأخیر شبکه
    },
    delay: 300,
    data: function(p) { return { q: p.term }; },
    processResults: function(d) { return d; }
  },
  minimumInputLength: 1,
  placeholder: 'جستجو کنید...', dir: 'rtl'
});

⚡API و Events

// رویداد change
$('#my-select').on('change', function() {
  console.log('مقدار:', $(this).val());
});

// هنگام انتخاب — اطلاعات کامل گزینه
$('#my-select').on('select2:select', function(e) {
  var data = e.params.data;
  console.log('id:', data.id, 'text:', data.text);
});

🎨Template سفارشی

با templateResult و templateSelection می‌توان ظاهر گزینه‌ها را کاملاً تغییر داد:

function formatOption(option) {
  if (!option.id) return option.text;
  var emoji = $(option.element).data('emoji') || '';
  var desc  = $(option.element).data('desc')  || '';
  return $('<div style="padding:4px 0">'
    + '<span style="font-size:18px;margin-left:8px">' + emoji + '</span>'
    + '<strong>' + option.text + '</strong>'
    + (desc ? '<br><small style="color:#888;margin-right:26px">'+desc+'</small>' : '')
    + '</div>');
}

$('#s2-template').select2({
  templateResult:    formatOption,
  templateSelection: formatOption,
  dir: 'rtl'
});

⚙تنظیمات پیشرفته

تنظیم زبان فارسی داخلی

// تنظیم دستی پیام‌های فارسی
$('#s2').select2({
  language: {
    noResults:       function() { return 'نتیجه‌ای یافت نشد'; },
    searching:       function() { return 'در حال جستجو...'; },
    inputTooShort:   function(args) { return 'حداقل '+args.minimum+' کاراکتر'; },
    maximumSelected: function(args) { return 'حداکثر '+args.maximum+' گزینه'; },
    loadingMore:     function() { return 'در حال بارگذاری...'; },
    removeAllItems:  function() { return 'حذف همه'; }
  },
  dir: 'rtl'
});

🏆فرم کامل ثبت‌نام

ترکیب Select2 با یک فرم واقعی — اعتبارسنجی و نمایش خروجی:

🚀زمین بازی کد (Playground)

با Select2 یک منوی کشویی پیشرفته (جستجو، چندانتخابی، Tags) بساز. تنظیمات را تغییر بده و ▶ اجرا را بزن. jQuery و Select2 نسخهٔ ۴.۰.۱۳ آفلاین بارگذاری می‌شوند.