PiaSelect.js harici bir özel CSS dosyasına ihtiyaç duymaz. Kendi gerekli minimal stilini sayfaya otomatik ekler. Sadece script'i projenize dahil edin ve başlatın.
<!-- Sadece Script dosyasını ekleyin -->
<script src="PiaSelect.js"></script>
<!-- Otomatik Başlatma: select etiketinize "PiaSelect" sınıfı eklerseniz otomatik çalışır -->
<select class="form-select PiaSelect">...</select>
<!-- Veya manuel olarak JS ile başlatın -->
<script>
new PiaSelect('#mySelect', {
searchable: true,
title: 'Lütfen seçiniz'
});
</script>
Arama kapalı, HTML'de boş option girilmediği halde title görünür.
new PiaSelect('#demo1', {
searchable: false,
title: 'Şehir Seçiniz'
});
Çoklu verilerde hızlıca bulmak için arama kutusu.
new PiaSelect('#demo2', {
searchable: true,
title: 'Dil Seçiniz'
});
Tümünü seç/iptal et butonları ve arama aktif.
new PiaSelect('#demo3', {
searchable: true,
showActions: true, // Tümünü seç/kaldır
title: 'Meyveleri Seçiniz'
});
Arayüzdeki tüm metinleri değiştirebilirsiniz.
new PiaSelect('#demo4', {
searchable: true,
showActions: true,
title: 'Select Colors',
texts: {
searchPlaceholder: 'Type to search...',
selectAll: 'Check All',
deselectAll: 'Uncheck All',
emptySearch: 'No results found',
selectedCount: '{count} items selected'
}
});
HTML etiketine eklenen PiaSelect sınıfı ve data-* nitelikleriyle tüm metinleri özelleştirme.
<!-- JS koduna gerek yok, sınıfı ekleyin yeter! -->
<select class="form-select PiaSelect" multiple
data-title="Sebzeleri Seç"
data-searchable="true"
data-show-actions="true">...</select>
Ajax veya JS ile select içine yeni elemanlar bastığınızda hiçbir şey yapmanıza gerek kalmaz. MutationObserver sayesinde eklenti kendini otomatik günceller.
// Sadece standart yöntemle select'e option ekliyoruz.
const sel = document.getElementById('demo6');
sel.insertAdjacentHTML('beforeend',
'<option value="mercedes">Mercedes</option>');
// Başka HİÇBİR koda (reload vs) gerek yok!
// Eklenti değişikliği anında kendi algılar.