I'm a beginner in jquery and would like some help for the following situation:
In this field:
<input type="text" name="colaborador" id="colaborador">
How would you do where, for each letter you typed, you run a query in the database and return the rows of a table?
$(document).ready(function() {
$("#colaborador").keyup(function(){
//muitas dúvidas aqui
});
});
In my arquivo.php should I return a JSON ??? How would you do that ??
Here is an example I made, you can see if you look:
JAVASCRIPT:
<script src="https://code.jquery.com/jquery-latest.min.js">/script><scripttype="text/javascript">
function construirLista(conteudo) {
var lista='<div class="conteudo">';
for (var i in conteudo) {
lista += (conteudo[i].titulo !="" && conteudo[i].titulo!=null) ? '<h3>' + conteudo[i].titulo + '</h3>' : '';
lista += (conteudo[i].texto !="" && conteudo[i].texto!=null) ? conteudo[i].texto + "\n" : '';
lista += '</div>';
}
return lista;
}
function listarConteudo(termo) {
var dados = (termo!=null && termo.length > 3) ? {s_busca:termo} : null;
$('#result_busca').hide();
//loader antes de carregar
$('#geral')
.show()
.html('<center><br><br><img src="imagens/loader.gif" border="0"></center>');
$('#result_busca').hide();
$.post('buscar.php',dados,function(retorna){
var conteudo = jQuery.parseJSON(retorna);
(conteudo.length < 1) ? $('#respostaBusca').show() : $('#respostaBusca').hide();
$('#geral').html(construirLista(conteudo));
});
}
$(document).ready(function() {
$('#respostaBusca').hide();
listarConteudo(null);
$('#buscaV2 input[type="button"]').on('click',function() {
if ($('#buscaV2 #palavra').val().length < 3) {
alert('Digite ao menos 3 caracteres para fazer a busca!');
$('#buscaV2 #palavra').focus();
return false;
}
});
$('input[name="palavra"]').bind('input',function(){
var busca = $(this).val();
if (busca.length > 3){
$('input[name="palavra"]').each(function(){
listarConteudo(retiraAcentos(busca));
});
} else if( busca.length == 0){
listarConteudo(null);
}
});
$('#botao_busca').click(function(){
$('#respostaBusca,#result_busca').hide();
$("input[name=glossario]").each(function() {
var busca = $(this).val();
if (busca.length >= 1) {
$('#geral').hide();
$('#result_busca').show();
$.post('buscar.php',{s_busca:retiraAcentos(busca)},function(retorna){
var conteudo = jQuery.parseJSON(retorna);
(conteudo.length < 1) ? $('#respostaBusca').show() : $('#respostaBusca').hide();
$('#result_busca').html(construirLista(conteudo));
});
} else {
$('#respostaBusca').show();
listarConteudo(null);
}
});
});
});
function retiraAcentos(palavra) {
var com_acento = 'áàãâäéèêëíìîïóòõôöúùûüçÁÀÃÂÄÉÈÊËÍÌÎÏÓÒÕÖÔÚÙÛÜÇ';
var sem_acento = 'aaaaaeeeeiiiiooooouuuucAAAAAEEEEIIIIOOOOOUUUUC';
var nova='';
for(var i=0; i<palavra.length; i++) {
if (com_acento.search(palavra.substr(i,1))>=0) {
nova+=sem_acento.substr(com_acento.search(palavra.substr(i,1)),1);
} else {
nova+=palavra.substr(i,1);
}
}
return nova;
}
HTML:
<div id="formBusca">
<form name="buscaV2" action="listar.php" method="post" id="buscaV2">
<label>Pesquisar: </label><input type="text" name="palavra" id="palavra" placeholder="Digite a palavra" /> <input type="button" value="OK" />
</form>
</div>
<!-- aqui o conteúdo -->
<div id="respostaBusca" style="display:none">
<p><br><br>Este Termo não foi localizado.</p>
</div>
<div id="boxPagina" style="width:100%;float:left" class="caixinha">
<span id="result_busca"></span>
<span id="geral">
<!-- aqui carrega o HTML -->
</span>
</div>
PHP:
<?php
function buscarDados($post = null, $db) {
$dados = array();
if (isset($post['s_busca']) && $post['s_busca']!="") {
$busca = trim($post['s_busca']);
$sql = $db->prepare("Select * from TABELA WHERE titulo LIKE ? OR texto LIKE ?");
$data = $sql->execute(array('%".$busca."%','%".$busca."%'));
} else {
$query = $db->prepare("Select * from TABELA WHERE 1");
$query->execute();
$results = $query->fetch();
}
$data = array();
if (count($results))
foreach ($results as $k => $val) {
$data[] = array('titulo'=>utf8_encode($val['titulo']),'texto'=>utf8_encode($val['texto']));
}
echo json_encode($data);
}
}
if ($_POST) {
buscarDados($_POST, $db);
} else {
buscarDados(null, $db);
}
?>