Récupération de données SQL en js

Version imprimable

Bonjour, je viens vers vous parce que je bloque au niveau de mon code.

J'ai crée une barre de recherche avec un système de suggestion en dessous.

Je souhaite que lorsque l'on clique sur l'une de ces suggestions, la barre de recherche se remplisse automatiquement de l'intitulé de la suggestion.

Je suis passé par du php car l'on recherche des éléments d'une requête SQL.

J'ai essayé quelque chose mais c'est à chaque fois le premier élément qui ressort et seulement lui !

Voici mon code :

L'HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
  <form class="form-inline formsociete" method="post">
              <h4 class = "h4titre">Société - Equipement : </h4>
              <div class="alignementvertical">
                <input class="form-control mr-sm-2 searchbarsociete" id="searchsociete" type="text" placeholder="Nom de la société" name="recherchesociete">
              </div>
              <input type="submit" class="btn btn-outline-info my-2 my-sm-0 btnrecherchesociete" value="Rechercher">
              <div class="alignementvertical">
                <div id="resultsociete">    
                </div>
              </div>
          </form>

Le PHP :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
if(isset($_POST['societe']))
        {
            $autocompletesociete = (String) trim($_POST['societe']);
 
            $reqautosociete = $bdd->query("SELECT * FROM societe WHERE Snom LIKE '%".$autocompletesociete."%'");
 
            $reqautosoc = $reqautosociete->fetchALL();
 
            foreach($reqautosoc as $r)
            {
                ?>   
                    <div class = "autocompletesociete"><a name="testsociete" onclick="Remplirsociete()" id="inputsociete" class="aautocompletesociete"><?= $r['Snom'] ?></a></div>
                <?php    
            }
        }

Le JS :

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
 
$(document).ready(function()
        {
            $("#searchsociete").keyup(function()
            {
                $('#resultsociete').html('');
 
                var societe = $(this).val();
 
                if(societe != "")
                {
                    $.ajax(
                        {
                            type: 'POST',
                            url: 'recherchesociete.php?id=' + urluser,
                            data: 'societe=' + encodeURIComponent(societe),
                            success: function(data)
                            {
                                if(data != "")
                                {
                                    $('#resultsociete').append(data);
                                }
                                else
                                {
                                    document.getElementById('resultsociete').innerHTML = "<div style='font-size: 20px; text-align: left; margin-top: 10px; color: red; font-weight: 500'>Aucune société trouvée !</div>"
                                }
                            }
                        }
                    )
                }
            });
        });

Ma tentative de résolution du problème :

Code:

1
2
3
4
5
6
 
        function Remplirsociete()
        {
            document.getElementById('searchsociete').value = document.getElementById('inputsociete').text;
            e.preventDefault();
        }

Merci d'avance pour votre aide !

25/01/2021, 13h53
javatwister

Bonjour,

dans ton PHP, tu génères des liens qui ont tous le même id="inputsociete"; c'est déjà un problème...
25/01/2021, 14h06
devdudimanche2.0

Ok, que dois-je faire alors ?

Si tu peux un peu plus me guider parce que là je suis perdu :?

Merci
25/01/2021, 14h44
SpaceFrog

un id devant être unique sur la page, la première chose à faire est de modifier ton php afin qu'il génère des id uniques (incrémentation)...
25/01/2021, 14h48
devdudimanche2.0

Ok, je vais essayer de faire ça alors, je reviens vers vous si je coince !

Merci de votre réponse !

Bonjour,

Si tu n'as pas de clé unique de la table societe, tu peux par exemple utiliser un index afin de différencier les id inputsociete0,inputsociete1,inputsociete2... :
Code:

1 2 3 4 5 6 foreach($reqautosoc as $index=>$r){ ?> <div class = "autocompletesociete"><a name="testsociete" onclick="Remplirsociete()" id="inputsociete<?=$index?>" class="aautocompletesociete"><?= $r['Snom'] ?></a></div> <?php }
puis pour la fonction Remplirsociete(), il va falloir l'appeler comme suite onclick="Remplirsociete.call(this)" pour pouvoir utiliser le mot clé this à l'intérieur de la fonction :
Code:

1 2 3 4 function Remplirsociete(){ document.getElementById('searchsociete').value = this.text; }

25/01/2021, 14h58
devdudimanche2.0

Eureka !

Ta solution marche, merci beaucoup !

Si tu savais depuis combien de temps je cherche une solution à ce problème 8O

Merci à tous d'avoir pris le temps de me répondre, vraiment !