Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá!
Recentemente fiz uma[postagem aqui no fórum](/topic/585459-como-popular-um-campo-input-text-com-twitter-typeahead-baseando-se-no-valor-selecionado-em-uma-combobox/) a respeito de se carregar valores em um input text baseando-se na opção selecionada em uma select box, onde obtive uma solução. Por conta disso resolvi adicionar um complemento neste meu código onde o mesmo deve carregar valores corretamente dentro de uma input text utilizando o plugin [TypeAhead.js](https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md) e o evento onchange do Jquery. Como forma de demonstrar a minha dúvida em funcionamento, [criei uma página](https://2020x.000webhostapp.com/) como forma de testar a solução. O que ocorre é que quando seleciona uma opção no select box "Categorias", o Ajax manda um request para o php script onde o mesmo retorna os valores corretamente em JSON conforme a imagem do console do navegador Chrome abaixo: Até aqui os valores relacionados com a opção selecionada no select box "Categorias" são carregados corretamente porém se eu não atualizar a página "F5" e ao mesmo tempo eu selecionar alguma outra opção dentro do select box, o input text carrega além dos valores relacionados, todos os valores não relacionados com a opção selecionada ou seja, o input text somente carrega os valores corretamente se eu atualizar a página em questão. Abaixo uma imagem demonstrando os valores carregados em uma input text quando seleciono uma outra opçao no select box quando não se atualiza a página. Todos os valores não relacionados também são carregados: Abaixo publico o html e os scripts Ajax, Typeahead e PHP que estou utilizando neste projeto: **HTML**<html lang="en">
<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"><link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.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 country 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="">seleciona 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" id="prod"> <div ><input type="text" name="produtos" id="produtos" class="form-control input-lg typeahead" autocomplete="off" placeholder="" /></div> </div> <div class="col-md-4"> <div id="imagem" name="imagem"></div> </div> </div>
</div> </body>
</html> No script abaixo, o Ajax envia um request para o script PHP que por sua vez retorna os valores em JSON para o Ajax que envia para o TypeAhead e carrega o input text com valores relacionados. Após selecionar uma opção no input text, o Jquery envia um valor relacionado para a div "#imagem": $(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). }, }). }). }). Abaixo, o php script que seleciona os valores baseando-se no valor selecionado do select box e os envia em formato JSON para o Ajax: <?php
require_once 'dbConfig.php'. if(!empty($_POST["categoria"])){ $query = " SELECT * FROM produtos WHERE categoriaFK = ".$_POST['categoria']." ". $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,[nesta página que criei](https://2020x.000webhostapp.com/) demonstra o funcionamento de todo o código acima, porém acredito que devo modificar o script para que o mesmo carregue valores corretamente quando seleciono alguma opção no select box "Categorias" sem precisar atualizar a página para que o mesmo carregue corretamente. Como posso proceder? Desde já agradeço a atenção de todos.
Após alguns ajustes consegui encontrar uma solução. Após ter criado uma variável chamada "lista" para criar um objeto, fiz um ajuste no evento afterSelect do Typeahead onde após selecionar uma opção dentro do input text o evento Typeahead envia um valor relacionado ao item para dentro da div #imagem. Esta solução pode ser vista em funcionamento aqui.
Segue o script ajustado: