autocomplete, selectionner la suggestion avec la souris

Version imprimable

Bonjour à tous,

J'ai un formulaire avec un champ de texte et une liste. Les éléments de la liste prenom sont filtrés à partir de la valeur du champ texte nom. J'utilise autocomplete pour suggérer les noms disponibles.
Code:

1 2 3 4 5 6 7 $('#nom').autocomplete({ source : 'sourceNom.php', select : function(event, ui){ majLstPrenom(); // appel ajax pour filtrer la liste des prénoms } });
Tout fonctionne correctement en sélectionnant un élément de la liste de suggestion à l'aide des flèches du clavier.
Mais j'aimerais aussi pouvoir sélectionner cet élément suggéré avec un clic de souris.

Or, avec ce code, si je clique sur un des noms, le ui.item renvoyé correspond aux caractères que j'ai tapés (et pas le nom que j'ai sélectionné). Un problème de méthode select? d'event ?

J'imagine que la solution doit se trouver par là, mais j'ai pas été fichu de la trouver. :(

Merci pour votre aide

Ajout :

jQuery UI fournit-il l'outil que je cherche ou dois-je traiter les évènements en m'inspirant de ceci que je viens de trouver ?

07/07/2020, 17h00
Toufik83

Bonjour,

Tu dis qu'en sélectionnant un nom avec les flèches du clavier fonctionne, alors qu'avec la souris non ?:koi:

Montre le code du fichier sourceNom.php d'abord...

Merci Toufik,
Oui, la sélection fonctionne au clavier, mais pas avec la souris.

sourceNom.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
$db=include 'dbConfig.php';
 
$term = $_GET['term'].'%';
$completion = array(); //tableau de la liste des proposition d'autocomplete
 
$reqNom = <<<SQL
    SELECT DISTINCT auteur.lbl_nom as nom
    FROM auteur 
    WHERE auteur.lbl_nom LIKE ?
    ORDER BY auteur.lbl_nom ASC;
SQL;
 
$stmtNom = $db->prepare($reqNom) ;
$stmtNom -> bindParam (1, $term);
$stmtNom->execute(array($term));
while($nom = $stmtNom->fetch()){
    //echo 'nom : '; var_dump($nom);
    array_push($completion, $nom[0]);
}
//echo '\ncompletion :'; var_dump($completion);
//echo '\n$term :'; var_dump($term);
echo json_encode($completion);

09/07/2020, 17h01
Toufik83
Bonjour,

Je viens de tester ton code tel qu'il est et je n'ai remarqué aucun problème.

Deux questions :
- Quelle est la version de jQuery-ui que tu utilises ? (celle que j'ai utilisé dans mon teste est 1.12<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>)
- Et quand tu mets un console log de ui.item.label dans le select, tu reçois la bonne valeur ou pas ?
Code:

1 2 3 4 select : function(event, ui){ console.log("nom choisi :"+ui.item.label);//celle-ci }

Pour les versions, j'ai inséré ça dans le head de mon html
Code:

1 2 3 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
à la souris, la console me donne bien la bonne valeur de ui.item.label ('Rousseau' en l'occurence), mais le paramètre affecté à lbl_nom (lbl_nomAuteur sur la copie d'écran) dans sourceNom.php (ajout : et dans l'appel ajax de la liste des prénoms)reste 'rou'

Je ne vois pas pourquoi le ui.item.label n'est pas inséré dans l'input, sinon si tu veux le forcer tu peux utiliser ce code :
Code:

1 2 3 4 5 6 select : function(event, ui){ majLstPrenom(); // appel ajax pour filtrer la liste des prénoms $('#nom').val(ui.item.label);//forcer l'input d'insérer la valeur de ui.item.label return false;//obligatoire, sinon ça ne fonctionnera pas ! }

C'est l'appel ajax de ajax-lst-auteur.php qui crée la liste des prénoms

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
function majListPrenom () {
    var nomAuteur = $('#nomAuteur').val();
    if(nomAuteur)
        {
        $.ajax(
            {
            type:'POST',
            url:'ajax-lst-auteur.php',
            data:'lbl_nom='+nomAuteur,
            success:function(html)
                {
                $('#prenomAuteur').html(html);
                }
            }); 
        }
    else
        {
        $('#prenomAuteur').html('<option value="">Selectionner le nom ci-dessus</option>');
        }
}

ajax-lst-auteur.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
 <?php
$db=include 'dbConfig.php';
$lbl_nom=strval($_POST['lbl_nom']);
$prenomAuteurs=array();
 
//Récupérer les prénoms (id unique dans COUSIN) depuis le nom de famille sélectionné dans #nom de index.php
if(isset($lbl_nom)){
 
    //Déclaration de la requete
    $reqPrenomAuteur = <<<SQL
    SELECT id, CONCAT (lbl_prenom,' ',rq) AS prenom
    FROM auteur
    WHERE lbl_nom = ?
    ORDER BY lbl_prenom ASC;
SQL;
 
    try {
        $stmtPrenomAuteur = $db->prepare($reqPrenomAuteur);
        $stmtPrenomAuteur -> bindParam (1, $lbl_nom, PDO::PARAM_INT);
        $stmtPrenomAuteur-> execute (array($lbl_nom));
        $prenomAuteurs = $stmtPrenomAuteur->fetchAll(PDO::FETCH_ASSOC);
        unset($db);
        if (count($prenomAuteurs)>0) {
            echo '<option value="">Selectionner le prénom ou le détail ('.count($prenomAuteurs).' lignes) </option>';
            foreach($prenomAuteurs as $prenomAuteur)
                {
                echo '<option value="'.$prenomAuteur['id_cousin'].'">'.$prenomAuteur['prenom'].'</option>';
                }
 
            }
        else {
            echo '<option value="">Pas de prénom ou de détail disponible</option>';
            }
        unset($db);
        } 
    catch(Exception $e) {
		//Si Erreur PHP ou SQL
		print "Erreur  lors de la récupération du prénom de l'auteur " . $e->getMessage() . "<br/>";
		}
    }

Eh ben c'est normal, parce que ta fonction récupère le nom que tu as tapé et pas celui que tu as sélectionné.

Pour corriger ça, ajoute un paramètre dans la fonction majLstPrenom(nom), puis tu l'appelles avec ui.item.label :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
function majListAuteur (nom) {
    if(nom)
        {
        $.ajax(
            {
            type:'POST',
            url:'ajax-lst-auteur.php',
            data:'lbl_nom='+nom,
            success:function(html)
                {
                $('#prenomAuteur').html(html);
                }
            }); 
        }
    else
        {
        $('#prenomAuteur').html('<option value="">Selectionner le nom ci-dessus</option>');
        }
}

ET :

Code:

1
2
3
4
 
select : function(event, ui){
        majLstPrenom(ui.item.label);  // appel ajax pour filtrer la liste des prénoms
}

09/07/2020, 18h00
ClayStone

En réponse à ton post 6
Même punition, même comportement
09/07/2020, 18h08
ClayStone

En réponse à ton post 8... ;) C'est parfait !
Merci Toufik, t'es un chef ! :ccool:
Résolu !