Créer une boîte de combinaison modifiable entièrement fonctionnelle et personnalisable en JavaScript améliore l’interaction utilisateur en permettant à la fois la sélection dans une liste prédéfinie et la saisie de nouvelles valeurs. Ce tutoriel explore deux approches : une implémentation manuelle utilisant HTML, CSS et JavaScript, et une approche simplifiée utilisant la bibliothèque Select2.
Table des matières
- Méthode 1 : Création d’une boîte de combinaison modifiable personnalisée
- Méthode 2 : Utilisation de la bibliothèque Select2
- Amélioration de votre boîte de combinaison modifiable
Méthode 1 : Création d’une boîte de combinaison modifiable personnalisée
Cette méthode offre un contrôle granulaire et une compréhension approfondie des mécanismes sous-jacents. Nous allons combiner un champ de saisie pour la frappe et une liste non ordonnée cachée pour afficher les options.
Tout d’abord, configurons la structure HTML :
<div class="combobox">
<input type="text" id="comboboxInput" placeholder="Sélectionner ou taper…">
<ul id="comboboxList"></ul>
</div>
Ensuite, ajoutez le CSS pour le style :
.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; /* Caché par défaut */
}
.combobox li {
padding: 5px;
cursor: pointer;
}
.combobox li:hover {
background-color: #f0f0f0;
}
Enfin, le JavaScript pour gérer les fonctionnalités :
const input = document.getElementById('comboboxInput');
const list = document.getElementById('comboboxList');
let options = ['Option 1', 'Option 2', 'Option 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);
});
// Ajouter une nouvelle fonctionnalité d'option (exemple)
input.addEventListener('keydown', (event) => {
if (event.key === 'Enter' && !options.includes(input.value)) {
options.push(input.value);
list.style.display = 'none';
input.value = ''; //effacer la saisie après l'ajout
}
});
Méthode 2 : Utilisation de la bibliothèque Select2
Select2 simplifie considérablement le processus. Incluez les fichiers CSS et JavaScript Select2 dans votre projet (vous pouvez les télécharger sur le site Web officiel de Select2 ou utiliser un CDN). Ensuite, initialisez Select2 sur votre élément select :
<select id="mySelect">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
<script>
$('#mySelect').select2({
tags: true, // Active l'ajout de nouvelles options
allowClear: true // Permet de vider la sélection
});
</script>
L’option tags: true rend la boîte de combinaison modifiable, permettant aux utilisateurs d’ajouter de nouvelles options non présentes dans la liste initiale. L’option allowClear: true fournit un moyen de vider la sélection.
Amélioration de votre boîte de combinaison modifiable
Quelle que soit la méthode choisie, tenez compte des améliorations suivantes :
- Persistance : Stockez les options à l’aide du stockage local ou d’une base de données côté serveur pour les conserver entre les sessions.
- Validation : Mettez en œuvre la validation des entrées pour éviter les entrées non valides.
- Style : Personnalisez l’apparence à l’aide de CSS pour une intégration transparente avec la conception de votre application.
- Sources de données distantes : Pour les grands ensembles de données, récupérez les options dynamiquement à l’aide d’appels AJAX.