Ce site utilise des cookies pour améliorer uniquement votre expérience utilisateur.
Vous pouvez lire à tout moment comment nous utilisons les cookies sur le site.
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>
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>