Souhaitez-vous créer un champ d'autocomplétion dans votre formulaire ? La fonctionnalité d'autocomplétion peut améliorer considérablement l'expérience de l'utilisateur en lui proposant des suggestions au fur et à mesure qu'il tape, en lui faisant gagner du temps et en garantissant la cohérence des données. Dans cet article, nous allons montrer comment utiliser JavaScript pour mettre en œuvre la fonction d'autocomplétion pour un champ de saisie de texte avec une liste de réponses pré-approuvées.
Création du formulaire
Nous allons commencer par créer un nouveau formulaire et ajouter nos champs, qui comprendront au moins un champ de texte à ligne unique. Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter ce guide utile.
Création d'un champ d'autocomplétion
Il est maintenant temps d'ajouter ce snippet à votre site. Si vous avez besoin d'aide pour savoir où et comment ajouter un extrait personnalisé à votre site, veuillez consulter ce tutoriel.
/**
* Turn any Single Line Text field into an autocomplete field
*
* @link https://wpforms.com/developers/how-to-create-an-autocomplete-field-in-your-form/
*/
function wpf_dev_text_autocomplete( ) {
?>
<script>
function autocomplete(inp, arr) {
/*the autocomplete function takes two arguments,
the text field element and an array of possible autocompleted values:*/
var currentFocus;
/*execute a function when someone writes in the text field:*/
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
/*close any already open lists of autocompleted values*/
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
/*create a DIV element that will contain the items (values):*/
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/*append the DIV element as a child of the autocomplete container:*/
this.parentNode.appendChild(a);
/*for each item in the array...*/
for (i = 0; i < arr.length; i++) {
/*check if the item starts with the same letters as the text field value:*/
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
/*create a DIV element for each matching element:*/
b = document.createElement("DIV");
/*make the matching letters bold:*/
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
/*insert a input field that will hold the current array item's value:*/
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
/*execute a function when someone clicks on the item value (DIV element):*/
b.addEventListener("click", function(e) {
/*insert the value for the autocomplete text field:*/
inp.value = this.getElementsByTagName("input")[0].value;
/*close the list of autocompleted values,
(or any other open lists of autocompleted values:*/
closeAllLists();
});
a.appendChild(b);
}
}
});
/*execute a function presses a key on the keyboard:*/
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
/*If the arrow DOWN key is pressed,
increase the currentFocus variable:*/
currentFocus++;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 38) { //up
/*If the arrow UP key is pressed,
decrease the currentFocus variable:*/
currentFocus--;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 13) {
/*If the ENTER key is pressed, prevent the form from being submitted,*/
e.preventDefault();
if (currentFocus > -1) {
/*and simulate a click on the "active" item:*/
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
/*a function to classify an item as "active":*/
if (!x) return false;
/*start by removing the "active" class on all items:*/
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/*add class "autocomplete-active":*/
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
/*a function to remove the "active" class from all autocomplete items:*/
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
/*close all autocomplete lists in the document,
except the one passed as an argument:*/
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
/*execute a function when someone clicks in the document:*/
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
/*An array containing all the programming class names*/
var classes = ["JavaScript","HTML/CSS","Python","C","C+","C++","Java","TypeScript","Pearl","R","SQL","PHP"];
/*initiate the autocomplete function on the "myInput" element, and pass along the countries array as possible autocomplete values:*/
autocomplete(document.getElementById("wpforms-3241-field_6"), classes);
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_text_autocomplete', 30 );
L'autocomplétion(document.getElementById("wpforms-3241-field_6"), classes) ; ciblera spécifiquement le formulaire ID 3241 et le champ ID 6 et lorsque ce champ sera cliqué, il déclenchera ce snippet et tentera d'effectuer une autocomplétion basée sur les caractères saisis dans le champ tout en recherchant dans la liste de classes que nous avons ici dans le snippet.
var classes = ["JavaScript", "HTML/CSS", "Python", "C", "C+", "C++", "Java", "TypeScript", "Pearl", "R", "SQL", "PHP"] ;
Vous devrez mettre à jour la liste des classes pour qu'elle corresponde à ce dont vous avez besoin pour votre champ. Vous devrez également mettre à jour le champ wpforms-3241-field_6 pour qu'il corresponde à vos propres identifiants. Pour vous aider à trouver vos identifiants, consultez ce tutoriel.
Ajouter le CSS
La dernière étape consiste à ajouter quelques feuilles de style CSS. Copiez et collez ce CSS sur votre site. Pour savoir comment et où ajouter des feuilles de style CSS personnalisées, veuillez consulter ce tutoriel.
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #f6f6f6;
border: 1px solid #cccccc;
font-size: 12px;
}
/*when hovering an item:*/
.autocomplete-items div:hover {
background-color: #e9e9e9;
}
/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
background-color: #1E90FF !important;
color: #ffffff;
}
Et le tour est joué ! Nous avons réussi à transformer un champ de texte d'une seule ligne en un champ d'autocomplétion. Souhaitez-vous ajouter un champ de sélection de couleur à votre formulaire ? Consultez notre tutoriel sur Comment ajouter un sélecteur de couleurs à votre formulaire.
