MAutoComplete

Présentation

MAutoComplete est un composant d'interface utilisateur qui fournit des suggestions de saisie automatique (autocomplétion) pour les champs de texte. Il est particulièrement utile pour les champs de recherche ou de sélection où les utilisateurs doivent choisir parmi une grande liste d'options.

Exemples :

Fonctionnalités

• Saisie semi-automatique avec suggestions en temps réel
• Personnalisation de l'apparence et du comportement
• Support pour un bouton de validation optionnel
• Gestion des événements JavaScript personnalisables
• Interface utilisateur réactive et moderne

Utilisation de base

// Fonctions JavaScript requises
<script>
    var 'select' = function(selectedItem){
        console.log("Élément sélectionné :", selectedItem['id']);
        // Mettez à jour votre interface ici
    };
</script>
<?php
use mlib\ui\autocomplete\MAutoComplete;

// Définir le chemin relatif vers le répertoire contenant les assets
MAutoComplete::registerAssetsPath('/chemin/vers/assets/mautocomplete');

// Afficher le champ de saisie avec autocomplétion
MAutoComplete::display(
    'mon_champ_autocomplete',               // ID du champ
    '/chemin/vers/votre/recherche.php',     // URL du script de recherche
    array(                                  // Fonctions JavaScript
        'onSelect' => 'select'
    )
);
?>

Script de recherche côté serveur

Votre script de recherche devrait renvoyer un tableau JSON des résultats correspondants. Exemple en PHP :

// Exemple de script de recherche (recherche.php)
$noms = array('Dupont', 'Durand', 'Martin', 'Lefevre', 'Dupond', 'Doe', 'Charles', 'Henry', 'Louis', 'Philippe');
$prenoms = array('Jean', 'Michel', 'Luc', 'Matthieu', 'Paul', 'Judas', 'Jacques', 'Pierre', 'Thomas', 'Philippe');

$search = isset($_GET['name']) && preg_match('/^[A-Za-z]+$/', $_GET['name']) ? $_GET['name'] : null;

$result = array();
if($search){
    for($i = 0; $i < count($noms); $i++){
        if(str_starts_with(strtolower($noms[$i]), strtolower($search))){
            $result[] = array('id' => $i, 'displayname' => $prenoms[$i].' '.$noms[$i]);
        }
    }
}
header('Content-Type: application/json');
echo json_encode($result);

Options avancées

Ajouter un bouton de validation

$options = [
    'button' => true,                              // Afficher un bouton
    'button_label' => 'Rechercher',                // Libellé du bouton
    'button_icon' => '/chemin/vers/icone.png',     // Optionnel
    'button_color' => '#4285f4',                 // Couleur de fond du bouton
    'button_text_color' => '#ffffff',            // Couleur du texte du bouton
    'placeholder' => 'Rechercher un produit...',   // Placeholder du champ
    'min_chars' => 2,                              // Nombre minimum de caractères  avant déclenchement de la recherche
    'empty_message' => 'Aucun résultat trouvé',
    'width' => '500px'                            // Largeur totale du composant
];

$functions = [
    'onSelect' => 'function(selectedItem) { /* ... */ }',
    'renderResult' => 'function(item) { return "<div>" + item.label + "</div>"; }',
    'onValidate' => 'function() { 
        // Action à effectuer lors du clic sur le bouton
        var input = document.getElementById("mon_champ_autocomplete");
        console.log("Recherche validée :", input.value);
    }'
];

MAutoComplete::display('mon_champ_autocomplete', '/recherche.php', $functions, $options);

Personnalisation de l'affichage des résultats

Vous pouvez personnaliser l'affichage des suggestions en utilisant la fonction renderResult :

function(item) {
    return `
        <div class="suggestion-item">
            <strong>${item.label}</strong>
            <span class="category">${item.categorie}</span>
        </div>
    `;
}

Gestion des événements

Événement onSelect

Déclenché lorsqu'un élément est sélectionné dans la liste des suggestions.

function(selectedItem) {
    // selectedItem contient l'objet complet de l'élément sélectionné
    console.log('ID:', selectedItem.id);
    console.log('Label:', selectedItem.label);

    // Mettre à jour un champ caché avec l'ID sélectionné
    document.getElementById('produit_id').value = selectedItem.id;

    // Afficher des détails supplémentaires
    document.getElementById('details_produit').innerHTML = 
        `<h3>${selectedItem.label}</h3>
         <p>Catégorie: ${selectedItem.categorie}</p>`;
}

Évènement onValidate

Déclenché lorsqu'un utilisateur valide la recherche. L'évènement est rattaché au bouton de validation situé à droite du champ de saisie, s'il est présent.

function() {
    // Action à effectuer lors de la validation de la recherche
    var input = document.getElementById("mon_champ_autocomplete");
    console.log("Recherche validée :", input.value);

    // Peut être utilisé pour soumettre un formulaire ou effectuer une action supplémentaire
}