I'm developing a quick search field with autocomplete of jquery ui, php and mysql. The autocomplete works perfectly though, I'd like to do it another way. When the user starts typing in the field the display window is filled with real estate related to the word he is looking for.
To help you better understand code follows:
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><scriptsrc="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><scriptsrc="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><scriptsrc="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 SAYING SOMETHING TO FILL THE WINDOW DYNAMICALLY
