Recherche pseudo avec autocomplétion

05 nov. 2014, 19:25

Bonjour à tous,

Je bloque depuis plusieurs jours maintenant sur un système d'aucomplétion que je n'arrive pas à faire fonctionner.
Je voudrais que la liste déroulante de l'autocomplétion affiche les pseudos de mes membres mais je bloque un peu.
Je souhaiterais tout faire en un seul fichier si possible.

Voici mon code :

<div id="corps" style="color:black;">	
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<?php
$getPseudoQuery = $bdd->query("SELECT pseudo FROM `membres`");
$getPseudo= $getPseudoQuery ->fetch();
?>   
<script>
    $(function() {
         
         
    var tab = /*Je ne sais pa trop comment faire ici*/;
         
        $( "#autocomplete" ).autocomplete({
            source: tab
        });
 
    });
    </script>
<style>
#autocomplete
{
    border: 3px solid;
}
</style>
 
<h2 class="demoHeaders">Recherche</h2>
<div>
    <input id="autocomplete" title="recherche autocomplétion">
</div>

Merci à ceux qui pourront m'aider.

05 nov. 2014, 22:04

salut,

utilise un tableau javascript : http://www.w3schools.com/js/js_arrays.asp

@+

06 nov. 2014, 19:16

Salut moogli et merci pour ton lien

Donc ça fonctionne quand je précise les éléments à afficher mais je ne vois pas comment afficher ma variable qui va effectuer la requête, à savoir $getPseudo.

<div id="corps" style="color:black;">  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<?php
$getPseudoQuery = $bdd->query("SELECT pseudo FROM `membres`");
$getPseudo= $getPseudoQuery ->fetch();
?>  
<script>
    $(function() {
         
         
    var tab =["Banana", "Orange", "Apple", "Mango"];
         
        $( "#autocomplete" ).autocomplete({
            source: tab
        });
 
    });
    </script>
<style>
#autocomplete
{
    border: 3px solid;
}
</style>
 
<h2 class="demoHeaders">Recherche</h2>
<div>
    <input id="autocomplete" title="recherche autocomplétion">
</div>

08 nov. 2014, 01:28

J'ai testé quelque chose et je pensais que ça fonctionnerais mais non.

<div id="corps" style="color:black;">	
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<?php
$getPseudoQuery = $bdd->query("SELECT pseudo FROM `membres`");
$getPseudo= $getPseudoQuery ->fetch();
?>   
<script>
    $(function() {      
    var tab ='<?php echo str_replace("'", "\'", $getAffiches); ?>';
         
        $( "#autocomplete" ).autocomplete({
            source: tab
        });
 
    });
    </script>
<style>
#autocomplete
{
    border: 3px solid;
}
</style>
 
<h2 class="demoHeaders">Recherche</h2>
<div>
    <input id="autocomplete" title="recherche autocomplétion">
</div>

</div>

08 nov. 2014, 15:21

l'attribut source de la fonction autocomplete doit pointer vers un script php générant du json.ce script php reçoit en paramètre($_get) les termes saisis dans l'input du form, puis va effectuer une requête sql qui sélectionne tous les pseudos commençant par les termes de l'autocompletion.A partir du résultat de la requête tu dois pouvoir fabriquer une chaîne encodée en json.
Il est nécessaire de séparer tes fichiers en 2: un fichier qui contient le script js et un fichier php qui fait du traitement :

<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
</head>


<div id="corps" style="color:black;">  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
 
<script>
  $(function() {
       $( "#autocomplete" ).autocomplete({ 
	source: "recherche-pseudo.php",
            minLength: 2
         });

});
    </script>

<h2 class="demoHeaders">Recherche</h2>
<div>
    <input id="autocomplete" title="recherche autocomplétion">
</div>

le fichier recherche-pseudo.php


 <?php
$term = $_GET[ "term" ];//les 2 premiers caractères saisis dans l'input du form
//connexion à la bp avec PDO
//extraire tous les pseudos commençant par les caractères $_GET[ "term" ]
$getPseudoQuery = $bdd->query("SELECT pseudo FROM `membres` WHERE pseudo LIKE '$term%'");
$tblPseudos = array();
while($row=$getPseudoQuery ->fetch() ){
//la clé value correspond à la valeur qui peuplera l'input du form et la clé label correspond à la valeur affichée dans la liste des suggestions
  $tblPseudos[] = array( "label"=> $row['pseudo'], "value"=>$row['pseudo'] );
}
//on souhaite obtenir du json selon le modèle suivant: [{"label":"toto","value":"toto"}, {"label":"tata","value":"tata"}]
echo json_encode($tblPseudos);

Recherche pseudo avec autocomplétion

Qui est en ligne