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"><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).?><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(). { 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...