0

Estou usando o plugin TypeAhead.js no meu projeto e gostaria de modificar meu script para que o mesmo possa preencher o campo input text corretamente após uma opção do select box for selecionada. Como referência criei uma página em HTML para demonstrar a dúvida aqui descrita.

Na postagem "Como carregar um valor em uma DIV após selecionar uma opção no dropdownlist de um input text que utiliza TypeAhead e Ajax?" demonstra uma dúvida que foi resolvida com a ajuda do usuário Sam.

Através desta dúvida solucionada resolvi inseri um select box onde o mesmo tem a função de preencher o input text #produto que por sua vez carrega valores baseados no ID da categoria selecionada.

Abaixo, mostrarei a tabela MySql que se chama (produtos) onde a mesma contém registros que são preenchidos no input text #produtos:

produtoID | categoriaFK (Foreing Key) | nomeProduto          | imagem
------------------------------------------------------------------------
01        | 1 (calçados)              | Tênis Adidas         | img_01
02        | 1 (calçados)              | Tênis Nike           | img_02
03        | 2 (Vestuários)            | Camisa Básica Branca | img_03
04        | 2 (Vestuários)            | Camisa Azul          | img_04
05        | 2 (Vestuários)            | Calça Jeans          | img_05

Abaixo, o código Ajax script que envia uma request para o código php script. Este script foi modificado conforme este tópico Como carregar um valor em uma DIV após selecionar uma opção no dropdownlist de um input text que utiliza TypeAhead e Ajax? pelo usuário @Sam onde adaptei-o para o formato que estou trabalhando:

 $(document).ready(function(){
var produtos;
var nomes = []; // array
var lista = {}; // objeto

$('#categoriaFK').on('change', function(){

var queryID = $(this).val();

   $.ajax({
    url:"fetch.php",
    method:"POST",

    data:{categoria:queryID},
    dataType:"json",
success:function(data){
console.log(data);

$.each(data, function(i, optionHtml){
              $('#produtos').append(optionHtml);
           });

$("#imagem").empty('');
$(".typeahead").val('');
produtos = data;

 }
 });

 $('.typeahead').typeahead({

  source: function(query, result)
  {
   $.each(produtos, function(idx, item){

      if(!~nomes.indexOf(item.nomeProduto)) nomes.push(item.nomeProduto);
      lista[item.nomeProduto] = item.imagem;
   });
   return result(nomes);
},
  afterSelect: function (data) {
  var img = lista[data];

   $('#imagem').html(img);


},

 });

}); 
});

Por fim, o código php script (fetch.php) que envia o resultado em json para script Ajax:

<?php
require_once 'dbConfig.php';

if(isset($_POST["categoria"])){
    $request = $db->real_escape_string($_POST["categoria"]);

    $query = "
        SELECT * FROM produtos WHERE categoriaFK = ".$request."
    ";

    $result = $db->query($query);
    $data = array ();

    if ( $result->num_rows > 0 )
    {
        while($row = $result->fetch_assoc ())
        {
            $data[] = $row;

        }

 header("Content-type: application/json; charset=utf-8 cache-control: no-cache, no-store, must-revalidate");
 echo json_encode($data);
 exit();
    }
}
?>

No caso, como mencionado acima, criei uma página html para demonstrar o funcionamento do código acima porém quando o usuário seleciona o select box "Categoria, o campo input text #produtos é preenchido corretamente utilizando o TypeAhead.js porém se o usuário selecionar alguma outra opção no campo select box sem atualizar a página, o campo input text carrega todos os registros da coluna "nomeProduto" da tabela produtos.

No caso qual seria a melhor forma para eu poder modificar o Ajax para que o mesmo preencha o campo input text #produtos corretamente sem que precise atualizar a página para tal?

1 Resposta 1

0

Após alguns ajustes consegui encontrar uma solução. Mantive a variável "lista" e fiz um ajuste no evento afterSelect do Typeahead onde após selecionar uma opção dentro do input text o evento afterSelect envia um valor relacionado ao item selecionado para dentro da div #imagem. Esta solução pode ser vista em funcionamento aqui.

Segue o script ajustado:

<script type="text/javascript">

    var produtos;
    var lista = {}; // cria o objeto

        $ ( function ()
        {
            $('#categoriaFK').on('change', function(){
                var queryID = $(this).val();

                $.ajax({
                    url:"fetch.php",
                    method:"POST",
                    data: {
                        categoria: queryID
                    },
                    dataType:"json",
                    success:function(data)
                    {
                        console.log(data);

                        $("#produtos").val ('');

                        produtos = data;

                    }
                });
            });

            $('#produtos').typeahead({
                source: function ( query, result )
                {
                    result ( $.map(produtos, function (item)
                        {
                            return item.nomeProduto;

                        }
                    ));

                },

                /* O ajuste foi feito aqui no evento afterSelect */

                  afterSelect: function(data) {
       $.each(produtos, function(idx, item){

      lista[item.nomeProduto] = item.imagem;
   });


   var img = lista[data];

   $('#imagem').html(img);


  },                        
            });

        });

</script>

Por fim, essa foi a solução que consegui encontrar. Caso alguém sugira uma modificação mais otimizada fiquem a vontade. Valeu!

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 .