Problème requète double

Par Jeshuitr le 26 Jul 2019 (Édité) 3 +99

Bonjour a tous, j'ai suivi le tuto liveresearch ajax https://www.youtube.com/watch?v=0m5IRwp_bRk, tout fonctionne a l'exception d'une chose. Il se trouve que lorsque je recherche un mot, en fonction du nombre de lettre taper das la barre de recherche, les résultat apparaissent en double ou en triple (1lettres=1resultat ; 2lettres=2resultat etc...) voici le code ou je ne vois pas de difference par rapport a celui de la video

le php

<?php
require_once('../connexionDB.php');
if(isset($_GET['user'])){
  $user=(String) trim($_GET['user']);
}
$req =$DB->query('SELECT Image, Ref_Fournisseur, nom, id FROM produit WHERE nom LIKE ? LIMIT 10',array("$user%"));
//$req->execute(array('user%'=>$_GET['user']));
$req=$req->fetchALL();
foreach ($req as $r) {
  ?>
  <div style="margin-top:20px; border-bottom:2px solid #ccc">
    <?php  echo '<a href="http://127.0.0.1/edsa-logiciel/pages/produit.php?value=$r[id]"><div class="test_ajax">';
      echo "<img src=\"$r[Image]\" class=\"yolo\">";
      echo " ";
      echo $r['nom'];
      echo " ";
      echo $r['Ref_Fournisseur'];
      echo'</div>';?>
  </div>

le html

  <div id="Search_mod">
        <h2>Cherchez une Réf, un nom ou un fournisseur</h2>
        <div class="form-group">
          <input class="form-control" type="text" id="search-product" value="" placeholder="Recherche"/>
        </div>
        <div style="margin-top:20px">
          <div id="result-search"></div>
        </div>
      </div>

le Js

  <script>
  $(document).ready(function(){
    $('#search-product').keyup(function(){
      $('#result-search').html('');
      var product=$(this).val();
      if(product != ""){
        $.ajax({
          type:'GET',
          url:'../function/product_search.php',
          data:'user='+ encodeURIComponent(product),
          success: function(data){
            if(data != ""){
              $('#result-search').append(data);
            }else{
              document.getElementById('result-search').innerHTML ="<div style='font-size: 20px; text-align:center;margin-top:10px'>Aucun produit trouvé</div>"
            }
          }
        });
      }
    });
  });
</script>
Cette pub permet au site de vivre ...

3 commentaires

AH ! Effectivement j'avais zappé celui-ci. cela fonctionne parfaitement. Je te remercie ;)


De rien j'avais eu le même problème au début ! 👍


N'hésite pas en mettre en résolue 😀👌

AH ! Effectivement j'avais zappé celui-ci. cela fonctionne parfaitement. Je te remercie ;)

Salut avant d'afficher le résultat lorsque tu saisies ta deuxième lettre il faut forcément effacer le résultat précédent 😁


Il faut que tu utilises cela :


$("#result-search").html('');


Avant que tu fasses ton affichage :


$('#result-search').append(data);


Voila ton script complet :

<script>
  $(document).ready(function(){
    $('#search-product').keyup(function(){
      $('#result-search').html('');
      var product=$(this).val();
      if(product != ""){
        $.ajax({
          type:'GET',
          url:'../function/product_search.php',
          data:'user='+ encodeURIComponent(product),
          success: function(data){
            if(data != ""){
              $("#result-search").html('');
              $('#result-search').append(data);
            }else{
              document.getElementById('result-search').innerHTML ="<div style='font-size: 20px; text-align:center;margin-top:10px'>Aucun produit trouvé</div>"
            }
          }
        });
      }
    });
  });
</script>




Cette pub permet au site de vivre ...