Discussion :

[devdudimanche2.0]

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 !

[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...

[devdudimanche2.0]

Ok, que dois-je faire alors ?

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

Merci

[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)...

[devdudimanche2.0]

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

Merci de votre réponse !

[Toufik83]

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 php :

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

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 :

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

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

[devdudimanche2.0]

Eureka !

Ta solution marche, merci beaucoup !

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

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