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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 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
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 : 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
 
$(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 : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
 
        function Remplirsociete()
        {
            document.getElementById('searchsociete').value = document.getElementById('inputsociete').text;
            e.preventDefault();
        }

Merci d'avance pour votre aide !