Carregar valores corretamente em uma input text usando evento OnChange do Jquery, AJAX e TypeAhead sem precisar atualizar página
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"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- jQuery UI library -->
<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.Discussão (1)
Carregando comentários...