Discussion :

[ClayStone]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[Toufik83]

Bonjour,

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

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

[ClayStone]

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

sourceNom.php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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);

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[ClayStone]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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'

[Toufik83]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !
}

[ClayStone]

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

Code majListAuteur :

Sélectionner tout - Visualiser dans une fenêtre à part

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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/>";
		}
    }

[Toufik83]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[ClayStone]

En réponse à ton post 6
Même punition, même comportement

[ClayStone]

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