PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

[violin101 0]

Caros amigos, saudações.

 

Por favor, poderiam me ajudar.

Estou com a seguinte dúvida:
--> como faço para para implementar o input código do produto, para quando o usuário digitar o ID o sistema espera de 1s a 2s, sem ter que pressionar a tecla ENTER.

exemplo:
código   ----   descrição
     1       -----   produto_A

 

Grato,

 

Cesar

[Williams Duarte 431]

Para implementar a busca automática com delay de 1-2 segundos sem precisar do ENTER, você pode usar jQuery junto com CodeIgniter.

Segue um exemplo simples:
 

$('#codigo_produto').on('input', function() {
    clearTimeout(timeoutId);
    
    const codigo = $(this).val();
    timeoutId = setTimeout(function() {
        if (codigo) {
            $.ajax({
                url: '<?= base_url("produtos/buscar") ?>',
                type: 'POST',
                data: { codigo: codigo },
                success: function(response) {
                    // Exibe o resultado
                    if (response.success) {
                        $('#resultado').html(response.produto.descricao);
                    }
                }
            });
        }
    }, 1500); // 1.5 segundos de delay
});

No seu controller:

 

public function buscar() {
    $codigo = $this->input->post('codigo');
    $produto = $this->produtos_model->buscar_por_codigo($codigo);
    echo json_encode([
        'success' => true,
        'produto' => $produto
    ]);
}

O código acima vai esperar 1.5 segundos após o usuário parar de digitar antes de fazer a busca. Você pode ajustar o delay alterando o valor 1500 para qualquer outro valor em milissegundos.

[violin101 0]

Amigo Williams, saudações.

Conforme sua orientação acima, fiz a adequação no meu sistema, mas infelizmente não tive sucesso.

Após digitar o Código no INPUT não fez a contagem de tempo e não mostrou a descrição.
 

O meu INPUT está assim:

<form action="<?php echo current_url(); ?>" id="frmPdv" method="post">     
  <div class="row">
    <div class="col-md-3">
      <label for="idProdutos">Código:</label>
      <input type="text" class="form-control" id="idProdutos" name="idProdutos" 
             style="margin-top:-7px; font-size:15px; width:100%; font-weight:normal; background:#FFFFFF;"  
             placeholder="Apenas Número"> 
    </div> 

    <div class="col-md-9">
      <label for="descricao">Produto:</label>
      <input type="text" class="form-control" id="descricao" name="descricao" 
             style="margin-top:-7px; font-size:15px; width:100%; font-weight:normal; background:#FFFFFF;" 
             placeholder="Pesquisar por descrição do produto" > 
    </div>  
  </div>
</form>

 

O meu JS está assim:

<script type="text/javascript">
    $(document).ready(function(){      
  
      $('#idProdutos').on('input', function() {
          clearTimeout(timeoutId);          
          const idprd  = $(this).val();
          timeoutId = setTimeout(function() {
              if (idprd ) {
                  $.ajax({
                      url: "<?php echo base_url(); ?>vendas/pdvcaixa/buscarID/",
                      type: "POST",
                      data: { idprd : idprd  },
                      success: function(response) {
                          // Exibe o resultado
                          if (response.success) {
                              //Exibe no INPUT da Descrição
                              $("#descricao").val(response.produto.descricao);
                          }
                      }
                  });
              }
          }, 1500); // 1.5 segundos de delay
      }); 
  
    });
</script>

 

O meu Controller está assim:

    public function buscarID() {
        $idprd = $this->input->post('idProdutos');
        $produto = $this->pdvcaixa_model->buscarCodigo($idprd);
        echo json_encode([
            'success' => true,
            'produto' => $produto
        ]);
    }

 

O meu MODEL está assim:

    public function buscarCodigo($idprd) {         
        $this->db->select('*');
        $this->db->from('produtos');  
        $this->db->where('produtos.idProdutos', $idprd);   
        $this->db->where('produtos.statusProd', 1);           
        $this->db->order_by('produtos.descricao', 'ASC');         
        return $this->db->get()->result();
    }    

 

Grato

 

Cesar

 

[Williams Duarte 431]

Primeiro, você não está declarando a variável timeoutId

 

<script type="text/javascript">
    $(document).ready(function(){      
        let timeoutId; // Declaração da variável
  
        $('#idProdutos').on('input', function() {
            clearTimeout(timeoutId);          
            const idprd = $(this).val();
            timeoutId = setTimeout(function() {
                if (idprd) {
                    $.ajax({
                        url: "<?php echo base_url(); ?>vendas/pdvcaixa/buscarID",
                        type: "POST",
                        data: { idProdutos: idprd }, // Corrigido nome do parâmetro
                        dataType: 'json', // Importante adicionar
                        success: function(response) {
                            if (response.success) {
                                // Como o resultado é um array, pegamos o primeiro item
                                if (response.produto.length > 0) {
                                    $("#descricao").val(response.produto[0].descricao);
                                }
                            }
                        },
                        error: function(xhr, status, error) {
                            console.log('Erro:', error);
                        }
                    });
                }
            }, 1500);
        }); 
    });
</script>

No Controller, ajuste para:

 

public function buscarID() {
    $idprd = $this->input->post('idProdutos');
    $produto = $this->pdvcaixa_model->buscarCodigo($idprd);
    
    if ($produto) {
        echo json_encode([
            'success' => true,
            'produto' => $produto
        ]);
    } else {
        echo json_encode([
            'success' => false,
            'message' => 'Produto não encontrado'
        ]);
    }
}

Se ainda assim não funcionar, você pode adicionar alguns console.log para debug:

 

$('#idProdutos').on('input', function() {
    console.log('Input detectado');
    clearTimeout(timeoutId);          
    const idprd = $(this).val();
    console.log('Valor digitado:', idprd);
    timeoutId = setTimeout(function() {
        console.log('Timeout executado');
        if (idprd) {
            // ... resto do código

 

[violin101 0]

amigo Williams, saudações.

Deus o abençoa, realmente faltou declarar no início do JS.

let timeoutId; // Declaração da variável

 

Fiz a Declaração e funcionou corretamente.

Muito Obrigado.

Deus o abençoa.

 

Atenciosamente,

 

Cesar

 

[Williams Duarte 431]