Olá! Estou desenvolvendo um projeto onde estou utilizando o plugin Bootstrap Twitter-TypeAhead onde carrego valores dentro de uma input text. A página que estou desenvolvendo possui 2 campos:
1. Um campo input text cujo id é "#produtos" e que carrega valores de uma coluna no MySql;
2. E uma div cujo id é "#imagem" e que no caso gostaria que dentro dessa div aparecesse um valor relacionado a opção selecionada no input text.
Tentei encontrar algumas questões similares a minha dúvida porém não consegui achar uma maneira correta de fazer isso:
- Carregar valor em input text depois de selecionar valor em select Codeigniter
- ao selecionar um valor de um select, aparecer uma div
- Carregar input text após selecionar select
Primeiramente, segue a estrutura da minha tabela (produtos) no MySql:
id | nomeProduto | categoriaFK | imagem
---------------------------------------------
01 | Tenis Nike | 1 | 001
02 | Camisa Adidas | 2 | 002
03 | Sapato Kildare | 1 | 003
Obs: A coluna "categoriaFK" é uma foreing Key dentro da tabela "produtos"
Abaixo segue o código html que exibe o campo input "#produtos" e a div "#imagem":
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/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>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<br/>
<div class="container">
<h2 align="center">Typeahead with Ajax PHP</h2>
<br/>
<div class="row">
<div class="col-md-4">
<label>Produto</label>
<input type="text" name="produtos" id="produtos" class="form-control input-lg" autocomplete="off" placeholder="Type Country Name" />
</div>
<div class="col-md-4">
<label>Imagem</label>
<div id="imagem" name="imagem"></div>
</div>
</div>
</div>
</body>
</html>
Abaixo, o código Ajax script que envia uma request para o código php (fetch.php):
<script>
$(document).ready(function(){
$('#produtos').typeahead({
source: function(query, result)
{
$.ajax({
url:"fetch.php",
method:"POST",
data:{query:query},
dataType:"json",
success:function(data)
{
result($.map(data, function(item){
return item;
}));
}
})
},
afterSelect: function (data) {
$('#imagem').html(data);
},
});
});
</script>
Abaixo, o código php que envia o resultado da requisição para o Ajax:
<?php
//fetch.php
include 'dbConfig.php';
$request = mysqli_real_escape_string($db, $_POST["query"]);
$query = "
SELECT * FROM produtos WHERE nomeProduto LIKE '%".$request."%'
";
$result = mysqli_query($db, $query);
$data = array();
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result))
{
$data[] = $row["nomeProduto"];
$data[] = $row["imagem"];
}
echo json_encode($data);
}
?>
Como podem observar no código acima, eu inseri dentro do typeahead script um código que executa depois que o valor é selecionado dentro do input text #produtos conforme abaixo:
afterSelect: function (data) {
$('#imagem').html(data);
},
Nesse caso toda vez que seleciono um valor dentro do input text ele mostra esse mesmo valor dentro da div #imagem porém o que eu gostaria de fazer seria aparecer o valor da coluna "imagem" que é relacionado ao valor "nomeProduto" dentro da div #imagem e não o valor da coluna "nomeProduto".
Como posso proceder? Obrigado.