1
I am developing a quick search field with jquery ui, php and mysql autocomplete. The autocomplete works perfectly however, I would like to do otherwise. When the user starts typing in the field is filled the window with the properties related to the word he is looking for.
To help you understand better follow code:
HTML
<?php
require 'conn.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Auto Completar</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Jquery UI css -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>Auto Completar</h1>
<form>
<div class="form-group">
<label for="busca">Busca rápido</label>
<input type="text" class="form-control" id="busca" placeholder="Buscar">
</div>
</form>
<div data-example-id="thumbnails-with-custom-content">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/100%x200"
alt="100%x200"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDI0MiAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MjAwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRlZWJiNjNhYTMgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMnB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNGVlYmI2M2FhMyI+PHJlY3Qgd2lkdGg9IjI0MiIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI4OS41IiB5PSIxMDUuNyI+MjQyeDIwMDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
data-holder-rendered="true"
style="height: 200px; width: 100%; display: block;">
<div class="caption">
<label class="">hsgdhsgdh</label>
<p><a href="#" class="btn btn-primary" role="button">R$ 767676</a> <a href="#" class="btn btn-default" role="button">Detalhes</a>7676</p>
</div>
</div>
</div>
<ul class="resultados">
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
SQL QUERY AND JSON RETURN
<?php
header('Content-Type: application/json; charset=utf-8');
require 'conn.php';
$acao = $_GET['acao'];
$acao = mysql_real_escape_string($acao);
switch($acao){
case 'completar':
$busca = mysql_real_escape_string($_GET['term']);
$query = "
SELECT
CASE
WHEN chamada IS NULL THEN 'nenhuma descrição'
WHEN chamada = '' THEN 'nenhuma descrição'
ELSE chamada
END AS Chamada
FROM imoveis
WHERE chamada LIKE '%$busca%'
";
$ex = mysql_query($query) or die(mysql_error());
$resJson = '[';
$first = true;
while($res = mysql_fetch_assoc($ex)):
if(!$first):
$resJson .= ', ';
else:
$first = false;
endif;
$array = array_map('utf8_encode', $res);
$resJson .= json_encode($array['Chamada'], JSON_FORCE_OBJECT);
endwhile;
$resJson .= ']';
echo $resJson;
break;
case 'pesquisa':
$pesquisa = mysql_real_escape_string($_GET['valor']);
$query = "
SELECT i.*,
CASE
WHEN chamada IS NULL THEN 'nenhuma descrição'
WHEN chamada = '' THEN 'nenhuma descrição'
ELSE chamada
END AS Chamada
FROM imoveis i
WHERE chamada LIKE '%$pesquisa%'
";
$ex = mysql_query($query) or die(mysql_error());
if(mysql_num_rows($ex) >= 1){
while($res = mysql_fetch_assoc($ex)):
echo '<li style="color: red;">';
echo $res['Chamada'].' '.$res['id_imovel'].' - '.$res['venda'];
echo '</li>';
endwhile;
}else{
echo '<li style="color: green;">';
echo 'Nenhum resultado encontrado';
echo '</li>';
}
break;
default:
echo 'Selecione uma ação';
}
SCRIPT JS
$(document).ready(function(){
//Aucomplete
var apresenta = $('.resultados');
apresenta.hide().html('<li>Aguarde, carregando...</li>');
$('#busca').autocomplete({
//source: resultados
source: 'controller.php?acao=completar',
select: function(event, ui){
var pegar = ui.item.value;
$.ajax({
url: 'controller.php',
data: 'acao=pesquisa&valor='+pegar,
success: function(resposta){
apresenta.fadeTo(500, 0.5, function(){
$(this).html(resposta).fadeTo(500, 1);
});
}
})
}
});
});
SUMMARY OF EVERYTHING: STARTED TYPING SOMETHING FILLS THE WINDOW DYNAMICALLY
And what’s the real problem? You don’t want us to understand all your code and tell you how to make it work the way you want it to, right?
– DontVoteMeDown
No!!!! Just tell me how the dynamic filling of the window is done, in this part I gave a lock, is the only thing missing.
– Igor Silva
Well, it wasn’t clear to me exactly where you stuck. Try to be more specific then.
– DontVoteMeDown
The autocomplete is already dynamic, if I search home, already filters everything related to home. What I want to do, instead of filling the field, be filled the window with the properties related to the word searched.
– Igor Silva