JavaScript’te tamamen işlevsel ve özelleştirilebilir düzenlenebilir bir açılır kutu oluşturmak, önceden tanımlanmış bir listeden seçim yapmaya ve yeni değerler girmeye olanak tanıyarak kullanıcı etkileşimini geliştirir. Bu öğreticide iki yaklaşım ele alınmaktadır: HTML, CSS ve JavaScript kullanarak manuel bir uygulama ve Select2 kitaplığını kullanan kolaylaştırılmış bir yaklaşım.
İçerik Tablosu
- Yöntem 1: Özel Düzenlenebilir Bir Açılır Kutu Oluşturma
- Yöntem 2: Select2 Kitaplığını Kullanma
- Düzenlenebilir Açılır Kutunuzu Geliştirme
Yöntem 1: Özel Düzenlenebilir Bir Açılır Kutu Oluşturma
Bu yöntem, ayrıntılı kontrol ve altta yatan mekaniğin derinlemesine anlaşılmasını sağlar. Yazma için bir giriş alanı ve seçenekleri görüntülemek için gizli bir sıralanmamış liste birleştireceğiz.
Öncelikle, HTML yapısını oluşturalım:
<div class="combobox">
<input type="text" id="comboboxInput" placeholder="Seçin veya yazın...">
<ul id="comboboxList"></ul>
</div>
Ardından, stil için CSS ekleyin:
.combobox {
position: relative;
display: inline-block;
}
.combobox input {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
}
.combobox ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #ccc;
background-color: white;
display: none; /* Varsayılan olarak gizli */
}
.combobox li {
padding: 5px;
cursor: pointer;
}
.combobox li:hover {
background-color: #f0f0f0;
}
Son olarak, işlevi işlemek için JavaScript:
const input = document.getElementById('comboboxInput');
const list = document.getElementById('comboboxList');
let options = ['Seçenek 1', 'Seçenek 2', 'Seçenek 3'];
input.addEventListener('input', () => {
list.innerHTML = '';
const filter = input.value.toLowerCase();
options.forEach(option => {
if (option.toLowerCase().includes(filter)) {
const item = document.createElement('li');
item.textContent = option;
item.addEventListener('click', () => {
input.value = option;
list.style.display = 'none';
});
list.appendChild(item);
}
});
list.style.display = input.value ? 'block' : 'none';
});
input.addEventListener('focus', () => {
list.style.display = 'block';
});
input.addEventListener('blur', () => {
setTimeout(() => {
list.style.display = 'none';
}, 100);
});
// Yeni seçenek işlevi ekle (örnek)
input.addEventListener('keydown', (event) => {
if (event.key === 'Enter' && !options.includes(input.value)) {
options.push(input.value);
list.style.display = 'none';
input.value = ''; //ekledikten sonra girişi temizle
}
});
Yöntem 2: Select2 Kitaplığını Kullanma
Select2, süreci önemli ölçüde basitleştirir. Select2 CSS ve JavaScript dosyalarını projenize ekleyin (bunları resmi Select2 web sitesinden indirebilir veya bir CDN kullanabilirsiniz). Ardından, select öğenizde Select2’yi başlatın:
<select id="mySelect">
<option value="Option 1">Seçenek 1</option>
<option value="Option 2">Seçenek 2</option>
<option value="Option 3">Seçenek 3</option>
</select>
<script>
$('#mySelect').select2({
tags: true, // Yeni seçenek eklemeyi etkinleştirir
allowClear: true // Seçimi temizlemeye olanak tanır
});
</script>
tags: true seçeneği, açılır kutuyu düzenlenebilir yapar ve kullanıcıların ilk listede bulunmayan yeni seçenekler eklemelerine olanak tanır. allowClear: true seçeneği, seçimi temizlemenin bir yolunu sağlar.
Düzenlenebilir Açılır Kutunuzu Geliştirme
Seçtiğiniz yönteme bakılmaksızın, şu geliştirmeleri göz önünde bulundurun:
- Kalıcılık: Seçenekleri, oturumlar arasında saklamak için yerel depolama veya sunucu tarafı bir veritabanı kullanarak saklayın.
- Doğrulama: Geçersiz girişleri önlemek için giriş doğrulaması uygulayın.
- Stil: Uygulamanızın tasarımına sorunsuz bir şekilde entegre olmak için CSS kullanarak görünümü özelleştirin.
- Uzaktan Veri Kaynakları: Büyük veri kümeleri için, AJAX çağrıları kullanarak seçenekleri dinamik olarak alın.