ajax Como popular um campo input text com Twitter Typeahead baseando-se no valor selecionado em uma combobox?

michelmir · Janeiro 7, 2020

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.

ShadowDLL · Janeiro 7, 2020

Segue exemplo, abaixo:

INDEX.PHP

<!DOCTYPE html>
<html>
	<head>
		<title> EXAMPLE </title>

		<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>
		<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>

		<script type="text/javascript">
		var produtos;

		$ ( function ()
		{
			$('#categoriaFK').on('change', function(){
				var queryID = $(this).val();

				$.ajax({
					url:"fetch.php",
					method:"POST",
					data: {
						categoria: queryID
					},
					dataType:"json",
					success:function(data)
					{
						$("#produtos").val ('');

						produtos = data;
					}
				});
			});

			$('#produtos').typeahead({
				source: function ( query, result )
				{
					result ( $.map(produtos, function (item)
						{
							return item;
						}
					));
				}
			});
		});
		</script>
	</body>
</html>

FETCH.PHP

<?php
include 'dbConfig.php';

if ( isset ( $_POST [ 'categoria' ] ) ) {
	$request = $db->real_escape_string($_POST["categoria"]);

	$query = "
		SELECT * FROM produtos WHERE categoriaFK = ".$request."
	";

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

	if ( $result->num_rows > 0 )
	{
		while($row = $result->fetch_assoc ())
		{
			$data[]=$row["nomeProduto"];
		}

		echo json_encode($data);
	}
}
?>

michelmir · Janeiro 7, 2020

Olá @ShadowDLL,

valeu pelo feedback. Testei a sua solução e deu certo aqui. Muito obrigado :thumbsup:

ShadowDLL · Janeiro 8, 2020

Disponível ;)

Entrar

ajax Como popular um campo input text com Twitter Typeahead baseando-se no valor selecionado em uma combobox?

Recommended Posts

michelmir 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ShadowDLL 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

michelmir 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ShadowDLL 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Saber se todos os produtos de uma consulta estão cadastrados no banco de dados

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante