Discussion :

[rvm31]

bonjour

Je créé un formulaire en autocomplete avec JQuery UI la liste est affiché par AJAX
J'ai réussit sans problème à afficher les noms et prénoms dans mon champ de recherche, mais je veux récupérer également depuis ma base d'autres infos qui apparaissent une fois la selection effectuée.
Ces informations complémentaires doivent s'afficher uniquement dans ma <div id="description"> et pas dans mon champ input qui doit garder uniquement le nom et prénom.

Une idée de comment procéder ?
Deux fichiers JSON? sélection uniquement de certains champs dans le JSON, 2 requête AJAX?
ou complètement autre chose.

page de formulaire

Code :

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

1
2
3
4
5
6
7
8
9
10
<div class="ui-widget">
    <input type="text" id="recherche" />
<div id="description" style="float:right"></div>
</div>
<script>
$('#recherche').autocomplete({
     source :'liste_inter.php',
 
 });
</script>

Création du JSON

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
<?php
$request = $bdd->prepare('SELECT * FROM inter WHERE nom_inter LIKE :term');
 
 
$request->execute(array('term' => '%'.$term.'%'));
 
$nom_pren= array(); // on créé le tableau
while($donnee = $request->fetch()) 
{
	$intermittent = new inter();//
	$inter->hydrate($donnee);
    array_push($nom_pren,$inter->nom()." ".ucfirst(strtolower($inter->prenom()))); notre tableau
}
 
echo json_encode($nom_pren); //conversion JSON
 
?>

[mathieu]

avec "autocomplete", tu as un évènement "response" qui permet de récupérer des informations supplémentaires provenant du script PHP
http://api.jqueryui.com/autocomplete/#event-response

[rvm31]

OK merci Mathieu

en m'inspirant d'un tuto d'open classroom j'ai fait comme ça

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('#recherche').autocomplete({
     source :'liste_inter.php',
    select : function(event, ui){ // lors de la sélection d'une proposition
    nom=( ui.item.label );
        photo=( ui.item.photo );
         id=( ui.item.id );
$( "#liste-inter" ).append( "<li class='col-lg-3 col-md-4 col-sm-6 col-xs-12 choix bloc-intermittents' data-select='non' id=id><input type='hidden' name='select[]' value='non'><div class='col-xs-12 ' style='opacity:0.7;' ><div class='img-liste'></div><div class='texte-bloc-intermittents'></div><div class='col-sm-9 '></div><input type='hidden' name='interid[]' id='hidden'></div></li>" );
    $(".texte-bloc-intermittents").html("<strong>"+nom+"</strong>");
    $(".img-liste").html("<img src='images/"+photo+"' class='col-xs-3'>");
    $("#hidden").val(id);
        fonction=( ui.item.fonction ); // on ajoute la description de l'objet dans un bloc
        // $('#description2').text( ui.item.id ); // on ajoute la description de l'objet dans un bloc
    }
 });

et côté PHP j'ai fait un tableau associatif

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
 $nom_pren= array();// on créé le tableau
while($donnee = $request->fetch()) // on effectue une boucle pour obtenir les données
{
	$intermittent = new intermittent();//
	$intermittent->hydrate($donnee);
	$nom_pren[$i]["value"]=$intermittent->nom()." ".ucfirst(strtolower($intermittent->prenom()));
	$nom_pren[$i]["label"]=$intermittent->nom()." ".ucfirst(strtolower($intermittent->prenom()));
	$nom_pren[$i]["fonction"]=$intermittent->fonction();
	$nom_pren[$i]["id"]=$intermittent->id();
	$nom_pren[$i]["photo"]=$intermittent->photo();
	$i++;
}
 
echo json_encode($nom_pren); // il n'y a plus qu'à convertir en JSON

Maintenant j'ai un autre souci, j'incrémente dans la page des li

Code :

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

$( "#liste-inter" ).append( "<li ...

ils se créent au fur et à mesure des requêtes utilisateurs et sont remplis par les résultats de la requête.
Mais à chaque nouvelle requête, les valeurs de tous les éléments sont remplies par le résultat.
J'ai bien compris que cela est dû au fait que chaque élément créé porte le même identifiant la classe, mais je ne vois pas comment leur donner un identifiant unique de manière à ce qu'ils gardent leurs valeurs une fois créées, il faudrait un id unique à chacun créé dynamiquement j'imagine, mais je sèche.

[mathieu]

pour commencer, enlève tous les "id=..." dans l'appel de "append"
si tu obtiens le bon affichage, tu rajouteras plus tard ce dont tu as besoin pour tes traitements.

[rvm31]

j'avais un identifiant unique renvoyé par mon id de la table, je l'ai donc rajouté au nom des id et là ça roule

Code :

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

$( "#liste-inter").append("<li class='col-lg-3 col-md-4 col-sm-6 col-xs-12 choix bloc-intermittents' data-select='non' id='bloc"+id+"'><input type='hidden' name='select[]' value='non'><div class='col-xs-12 ' style='opacity:0.7;' ><div class='img-liste' id='img"+id+"'></div><div class='texte-bloc-intermittents' id='texte-inter"+id+"'></div><div class='col-sm-9 '></div><input type='hidden' name='interid[]' id='hidden' value='"+id+"'></div></li>" );