Como carregar dados em um campo input text com Twitter Typeahead baseando-se no valor selecionado de uma select box?

jQuery

PHP

Ajax

07/01/2020

Olá!

Tenho um campo input text que carrega corretamente dados utilizando o plugin Twitter-Typeahead (https://twitter.github.io/typeahead.js/). No caso, também possuo uma caixa de seleção e eu gostaria que quando selecionar um valor nesta caixa, o campo input text fosse carregado com dados relacionados com o número ID da opção selecionada em questão.

Por exemplo, se dentro da minha caixa de seleção (categorias) conter a opção "Calçados" e essa opção for selecionada, o campo input text com o plugin twitter-typeahead fosse preenchido automaticamente com as opções relacionadas a opção selecionada "calçados" onde essas opções (ex.: "Nike", "Adidas", "Puma") fossem aparecendo a medida que fosse digitando na caixa input text com twitter-typeahead.

Abaixo, segue o código que estou utilizando para tentar montar essa solução. No código abaixo contém 2 campos um select box com as categorias carregadas com php e um campo input text que carrega dados utilizando o plugin Twitter-TypeAhead:

<!DOCTYPE html>
<html lang="pt-br">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">

<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>   

</head>

<body>

<div class="container">

<br>

<h1>DYNAMIC TWITTER TYPEAHEAD</h1>

<br>
<div class="row">

<?php 
    // Include the database config file 
    include_once 'dbConfig.php'; 

    // Fetch all the category data 
    $query = "SELECT * FROM categorias ORDER BY categoria ASC"; 
    $result = $db->query($query); 
?>


<!-- category dropdown -->
<div class="col-md-4">
<select id="categoriaFK" name="categoriaFK" class="form-control">
    <option value="">Selecione a categoria</option>
    <?php 
    if($result->num_rows > 0){ 
        while($row = $result->fetch_assoc()){  
            echo '<option value="'.$row['categoriaID'].'">'.$row['categoria'].'</option>'; 
        } 
    }else{ 
        echo '<option value="">Categoria não encontrada</option>'; 
    } 
    ?>
</select>
</div>

<div class="col-md-4">

<input type="text" name="produtos" id="produtos" class="form-control input-lg" autocomplete="off" placeholder="" />

</div>

</div>
</div>

</body>
</html>



Abaixo segue o script Ajax que chama o script php para popular o input text:

<script>
$(document).ready(function(){

 $('#categoriaFK').on('change', function(){
        var queryID = $(this).val();
 if(queryID){
 $('#produtos').typeahead({
  source: function(query, result)
  {
   $.ajax({
    url:"fetch.php",
    method:"POST",
    data: 'query='+queryID,
    dataType:"json",
    success:function(data)
    {
     result($.map(data, function(item){
      return item;
     }));
    }
   })
  }
 });
 }
 });
});
</script>


E por fim, o código php que tem como função enviar o resultado da query para o Ajax:

<?php
//fetch.php
include 'dbConfig.php';
if(!empty($_POST["query"])){ 
$request = mysqli_real_escape_string($db, $_POST["query"]);
$query = "
 SELECT * FROM produtos WHERE nomeProduto LIKE '%".$request."%' AND categoriaFK = ".$_POST["query"]."
";

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

if(mysqli_num_rows($result) > 0)
{
 while($row = mysqli_fetch_assoc($result))
 {
  $data[] = $row["nomeProduto"];
 }
 echo json_encode($data);
}
}
?>


Como podem observar no código acima, estou tentando utilizar o Ajax para preencher o input text conforme o valor selecionado na caixa de seleção (categorias). No caso como posso moldar o código php e o script Ajax para montar essa solução? É possível? Desde já agradeço.
Michel Miranda

Michel Miranda

Curtidas 0
POSTAR