Como popular um campo input text com Twitter Typeahead baseando-se no valor selecionado em uma combobox?
Olá!
Eu tenho um campo input text que carrega corretamente dados utilizando o Twitter-Typeahead. 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 preenchido 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 a mesma for selecionada, o campo input text com 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 e carregado com php e um campo input text que carrega dados utilizando o 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. No caso como posso acertar o código php e o script Ajax para montar essa solução? É possível? Desde já agradeço.Discussão (3)
Carregando comentários...