0

Estou com problemas, basicamente estou fazendo uma busca em produtos com like, mas está duplicando os produtos, vou anexar uma imagem que esclarece melhor.

$(document).ready(function(){
  $("#search").on( 'keyup', function () {

    var pesquisa = $("#search").val();
    if (pesquisa.length > 0) {
    $(".categorias").hide();
    $("#itempesquisa").remove();
    $.ajax({
      url:("ajax/buscaprods.php"),
      type: "POST",
      data: "busca="+pesquisa,
      success:function(dados){
        $.each(dados, function(index){
          var len    = dados.length;
          for (var i=0; i < len; i++){
            $("#listaprodutos").append("<li id='itempesquisa' class='item-content'><img src='"+dados[index].imgproduto+"' width='44'></div><div class='item-inner'><div class='item-title-row'><div class='item-title'>"+dados[index].descricao+"</div></div><div class='item-subtitle'>R$ "+dados[index].preco+"</div></div></li>")
          }
        });
      }})
    } else {
      $(".categorias.").show();
    }
  })

})

PHP

ini_set( 'display_errors', true );
error_reporting(E_ALL & ~ E_NOTICE & ~ E_DEPRECATED);

include('../class/mysql_crud.php');

$busca = $_POST["busca"];

$db = new Database();
$db->connect();
$db->sql("SELECT * FROM cad_produtos WHERE descricao LIKE '%$busca%' ");
$res = $db->getResult();

echo json_encode($res);

inserir a descrição da imagem aqui

1
  • Isso pode muito bem ser os dados gravados no banco. Nada no código postado mostra algo para duplicar. Commented 7/07/2016 às 19:23

1 Resposta 1

1

o seu problema é por esta atribuindo um id fixo para um elemento dinâmico.

na linha abaixo, como está informando um id, o jQuery deve entender que só existe um único elemento, então removerá apenas o primeiro registro.

$("#itempesquisa").remove();

porém você está gerando vários elementos com o mesmo id.:

for (var i=0; i < len; i++){
  $("#listaprodutos").append("<li id='itempesquisa' class='item-content'><img src='"+dados[index].imgproduto+"' width='44'></div><div class='item-inner'><div class='item-title-row'><div class='item-title'>"+dados[index].descricao+"</div></div><div class='item-subtitle'>R$ "+dados[index].preco+"</div></div></li>")
}

Uma saida, caso realmente precise de um id nestes itens, é utilizar a variável i do laço for para tornar o id único, então você poderá usar uma classe em comum para todos os elementos.

$(".itempesquisa").remove();
.
.
.
for (var i=0; i < len; i++){
  $("#listaprodutos").append("<li id='itempesquisa_" + i + "' class='item-content itempesquisa'><img src='"+dados[index].imgproduto+"' width='44'></div><div class='item-inner'><div class='item-title-row'><div class='item-title'>"+dados[index].descricao+"</div></div><div class='item-subtitle'>R$ "+dados[index].preco+"</div></div></li>")
}
3
  • muito obrigado :) Commented 7/07/2016 às 20:19
  • @JeffersonMelloOlynyki, olhando por cima o seu código, consegui ver alguns pontos que podem ser melhorados, se quiser, a gente pode ter uma conversa a respeito. Commented 8/07/2016 às 12:24
  • Sim gostaria sim, até por que faz pouco tempo que iniciei com javascript, ajax e php etc. estou fazendo por meio do pouco que aprendi, séria muito bom a ajuda para melhorar Commented 8/07/2016 às 13:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .