DijitalSelect

Bağımsız, kurumsal düzeyde sanal kaydırma (virtual scroll), etiketli çoklu seçim (tag input), ilişkisel kaskad seçim ve AJAX arama destekli seçim kutusu kütüphanesi.
Sıfır bağımlılık. Vanilla JS & Modern CSS.

Özellikler

• Sıfır Dış Bağımlılık (Zero-Dependency) — jQuery, Select2, Choices.js veya Popper.js gerektirmez. Saf Vanilla ES6+ ve CSS (~15 KB minified bundle).
• Sanal Kaydırma Motoru (Virtual Scroll) — 10.000+ kayıtlık dev veri setlerinde (tüm Türkiye mahalleleri, müşteri listeleri, stoklar) DOM'da sadece ekranda görünen ~15-20 satırı render ederek 60fps takılmasız akış sağlar.
• Çoklu Seçim & Etiket Girdisi (Multi-Select Tags) — Seçilen öğeleri input içinde şık zinc etiketleri (#f4f4f5 / #27272a) olarak listeler. ✕ ikonu veya Backspace ile silme desteği.
• Türkçe Karakter Duyarlı Akıllı Arama — ı-i, ç-c, ş-s, ğ-g, ü-u, ö-o büyük/küçük harf duyarsız normalizasyon.
• İlişkisel Kaskad Seçim (Cascading Dropdown) — İl seçildiğinde İlçe seçim kutusunun otomatik filtrelenip aktifleşmesi (dependsOn, filterBy).
• Canlı AJAX & Uzak Arama — Debounce gecikmeli dinamik API araması ve dahili yükleniyor animasyonu.
• Gruplu Seçenekler (Optgroups) — Hiyerarşik başlıklar ve kategorilere göre ayrılmış seçenek listeleri.
• HTML5 <select> Modernizasyonu — Mevcut standart form elemanlarını tek satırda modernize eden DijitalSelect.enhance() metodu.
• macOS Akıcı Genie In & Genie Out Animasyonu — Dropdown menüsü açılırken tıklandığı kontrol noktasından 3D perspektifle fışkırır (perspective(700px)), kapanırken aynı koordinata doğru huni daralmasıyla akıcı şekilde vakumlanır (60fps GPU hızlandırmalı).
• Tema Desteği — Light, Dark ve System (dijital-ui, dijital-table, dijital-form ve dijital-datepicker ile %100 uyumlu minimalist zinc paleti).
• Entegrasyonlar — HTMX ve Alpine.js ($ds) ile tam uyumlu mimari.

Kurulum

CDN

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dijital-select/dist/dijital-select.min.css">

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/dijital-select/dist/dijital-select.min.js"></script>

Sabit versiyon kullanımı:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dijital-select@1/dist/dijital-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/dijital-select@1/dist/dijital-select.min.js"></script>

UNPKG alternatifi:

<link rel="stylesheet" href="https://unpkg.com/dijital-select/dist/dijital-select.min.css">
<script src="https://unpkg.com/dijital-select/dist/dijital-select.min.js"></script>

NPM

npm install dijital-select

ES Module

import DijitalSelect from 'dijital-select';
import 'dijital-select/dist/dijital-select.min.css';

Hızlı Başlangıç

1. Basit Aranabilir Dropdown

<div id="firmaSecici"></div>

<script>
  const ds = new DijitalSelect('#firmaSecici', {
    placeholder: 'Firma seçiniz...',
    options: [
      { value: '1', label: 'Aselsan Elektronik Sanayi' },
      { value: '2', label: 'Havelsan Teknoloji Radar' },
      { value: '3', label: 'Roketsan Roket Sanayii' },
      { value: '4', label: 'TUSAŞ Türk Havacılık' }
    ],
    onChange: (val) => {
      console.log('Seçilen Değer:', val);
    }
  });
</script>

2. Çoklu Seçim & Etiket Girdisi (Tags)

const dsMulti = new DijitalSelect('#departmanSecici', {
  mode: 'multiple',
  placeholder: 'Departmanları seçin...',
  options: [
    { value: 'yazilim', label: 'Yazılım & Ar-Ge' },
    { value: 'pazarlama', label: 'Pazarlama' },
    { value: 'finans', label: 'Finans' },
    { value: 'ik', label: 'İnsan Kaynakları' }
  ],
  onChange: (values, selectedItems) => {
    console.log('Seçilenler:', values);
  }
});

3. 10.000+ Kayıtlık Sanal Liste (Virtual Scroll)

// 10.000 elemanlık liste anında oluşturulur ve sıfır gecikmeyle kaydırılır
const veriler = Array.from({ length: 10000 }, (_, i) => ({
  value: `id_${i}`,
  label: `Müşteri #${i + 1}`
}));

const dsVirtual = new DijitalSelect('#devListe', {
  options: veriler,
  virtualScroll: true, // Açık (varsayılan)
  maxHeight: 280
});

4. İlişkisel Kaskad Seçim (İl -> İlçe)

// 1. İl Seçici
const dsIl = new DijitalSelect('#ilSecici', {
  options: [
    { value: '34', label: 'İstanbul' },
    { value: '06', label: 'Ankara' }
  ]
});

// 2. İlçe Seçici (İl'e bağımlı)
const dsIlce = new DijitalSelect('#ilceSecici', {
  options: [
    { value: 'kadikoy', label: 'Kadıköy', parentId: '34' },
    { value: 'besiktas', label: 'Beşiktaş', parentId: '34' },
    { value: 'cankaya', label: 'Çankaya', parentId: '06' }
  ],
  disabled: true,
  dependsOn: dsIl.container,
  filterBy: 'parentId'
});

5. Canlı AJAX / Sunucu Araması

const dsAjax = new DijitalSelect('#urunArama', {
  placeholder: 'Ürün adı yazın...',
  ajaxDebounce: 300,
  ajax: async (query) => {
    const res = await fetch(`/api/urunler?q=${encodeURIComponent(query)}`);
    const data = await res.json();
    return data.map(item => ({ value: item.id, label: item.ad }));
  }
});

Yapılandırma Seçenekleri (Options)

| Seçenek | Tür | Varsayılan | Açıklama | | :--- | :--- | :--- | :--- | | mode | string | 'single' | Seçim modu: 'single' veya 'multiple'. | | placeholder | string | 'Seçiniz...' | Seçim yapılmadığında görünen metin. | | searchable | boolean | true | Arama kutusunu etkinleştirir. | | clearable | boolean | true | Tek tıkla temizleme butonunu (✕) gösterir. | | options | Array | [] | Seçenekler dizisi ({ value, label, description?, icon?, image?, badge?, badgeColor?, group?, disabled? }). | | creatable | boolean | false | Arama terimi listede yoksa yeni seçenek/etiket oluşturmayı etkinleştirir. | | createOptionText | Function | (q) => ... | Yeni seçenek buton metni oluşturucu. | | highlightMatch | boolean | true | Arama eşleşmelerini <mark class="ds-highlight"> ile vurgular. | | selectAll | boolean | false | Çoklu modda "Tümünü Seç / Temizle" toolbar butonlarını gösterir. | | name | string | null | Form & HTMX submit senkronizasyonu için gizli input ismi (name[]). | | syncHiddenInput | boolean | true | Seçili değerleri form submit için gizli inputlarla senkronize eder. | | virtualScroll | boolean | true | Sanal liste motorunu etkinleştirir (10.000+ kayıtta 60 FPS). | | itemHeight | number | 36 | Her seçeneğin piksel cinsinden yüksekliği (açıklama varsa otomatik 52px). | | maxHeight | number | 250 | Dropdown menünün maksimum yüksekliği. | | maxTags | number | null | Çoklu seçimde izin verilen maksimum etiket sayısı. | | ajax | Function | null | Dinamik arama fonksiyonu: (query) => Promise<Array>. | | ajaxDebounce | number | 250 | AJAX aramasında klavye bekleme süresi (milisaniye). | | dependsOn | string\|Element | null | Kaskad seçim için dinlenecek ebeveyn seçici. | | filterBy | string | 'parentId' | Ebeveyn değerinin eşleşeceği seçenek alanı. | | theme | string | 'system' | Tema: 'light', 'dark', 'system'. | | disabled | boolean | false | Seçim kutusunu devre dışı bırakır. |

Olaylar (Custom Events)

Tüm olaylar kapsayıcı elementten yukarıya yayılır (bubbles):

const select = document.getElementById('firmaSecici');

select.addEventListener('ds:change', (e) => {
  console.log('Seçilen Değer:', e.detail.value);
  console.log('Seçilen Nesneler:', e.detail.selected);
});

select.addEventListener('ds:search', (e) => {
  console.log('Aranan Kelime:', e.detail.query);
});

select.addEventListener('ds:open', () => {
  console.log('Menü açıldı');
});

select.addEventListener('ds:close', () => {
  console.log('Menü kapandı');
});

select.addEventListener('ds:clear', () => {
  console.log('Seçim temizlendi');
});

HTML5 <select> Modernizasyonu (enhance)

Mevcut bir <select> veya <select multiple> elementini tek satırda dönüştürebilirsiniz:

// Sayfadaki tüm data-select etiketli select'leri modernize et
DijitalSelect.enhance('select[data-select]');

Lisans

MIT © DijitalUI Team