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