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

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Javascript - Calcular Valores Monetário em Tempo Real

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante