Fiz uma busca utilizando ajax
que ao clicar em um botão dispara uma requisição com o termo procurado e retorna com dados que preenchem um combobox html
(select
). Até aí tudo bem. No entanto, achei interessante mudar esse comportamento de clicar no botão para buscar, para, ao invés disso, ser verificado no onkeyup()
durante a digitação.
Acontece que sinto que haverá uma carga extra sobre o servidor e gostaria de saber se vocês sugerem alguma prática que não onere tanto. Alguma técnica diferente fazendo alguma espécie de cache
que eu desconheço, ou ao invés de fazer busca a cada tecla digitada levantada, verificar após um número mínimo x de teclas ser digitado (etc).
Outra questão: Mas e se eu limitar a busca a mais de 3 caracteres e depois existir alguma ocorrência de exatos 3 caracteres?
Só não queria:
- Que o usuário sempre tivesse que clicar pra buscar e;
- Fazer requisições demais desnecessárias.
Ideias?
Segue código abaixo com um exemplo resumido do que estou tentando fazer:
formulario_busca.php
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <!-- Css do Bootstrap opcional, só coloquei pra carregar um estilinho básico e mostrar o íconezinho da lupa -->
<script>
$(document).ready(function()
{
$('#termo_busca').keyup(function()
{
$.ajax({
type: 'POST',
url: 'busca_ajax.php',
data: {
nome: $("#termo_busca").val()
},
success: function(data)
{
$('#listafornecedores').html(data);
}
});
});
});
</script>
<style>
body { font-size:14pt; padding:5%; }
#listafornecedores { width:500px; }
</style>
</head>
<body>
Nome fornecedor: <input type="text" id="termo_busca" name="termo_busca">
<button id="btn_busca">
Procurar <span class='glyphicon glyphicon-search'></span>
</button>
<br><br>
<form action="" method="post">
<b>Fornecedores encontrados com o termo pesquisado:</b><br>
<select id="listafornecedores" onclick="if( $('#listafornecedores').html() == '' ){ alert('Sem resultados carregados.\n Faça uma busca digitando o nome de um fornecedor.');}"></select>
<br>
... outros campos ...
<br>
<input type="submit" name="submit" value="Salvar">
</form>
</body>
<html>
busca_ajax.php
<?php
/*
--Tabela fornecedores usada para teste:
CREATE TABLE `fornecedores` (
`id` int(11) NOT NULL,
`nome` varchar(255) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
ALTER TABLE `fornecedores`
ADD PRIMARY KEY (`id`),
ADD KEY `idx_fornecedor_nome` (`nome`);
ALTER TABLE `fornecedores`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
--Massa de testes: fornecedores disponíveis para busca
INSERT INTO `fornecedores` (`nome`) VALUES ('Samsung'),('Microsoft'), ('Apple'),('Fornecedor Homônimo RJ'),('Fornecedor Homônimo SP'),('Fornecedor Homônimo MG');
*/
//MySQLi DESENVOLVIMENTO
$db_host="localhost";
$db_port="5432";
$db_name="testdb";
$db_user="root";
$db_password="";
$dbcon = mysqli_connect( $db_host, $db_user, $db_password );
mysqli_select_db($dbcon,$db_name);
mysqli_query($dbcon,"SET NAMES 'utf8'");
$nome = mysqli_real_escape_string($dbcon,$_POST["nome"]);
// se enviar nome vazio, não carregar nada
if(trim($nome)==''){ die(); }
$query = "SELECT * FROM fornecedores WHERE nome like '$nome%'";
$result = mysqli_query($dbcon,$query);
$options='';
while($linha = mysqli_fetch_assoc($result))
{
$options.='<option value="'.$linha["id"].'">'.$linha["nome"].'</option>';
}
echo $options; // isto voltará na variável data do ajax
JQuery autocomplete
, mas fugiria do escopo da pergunta...keyup
: api.jquery.com/delay . Só tome cuidado e balanceie com a expectativa de tempo de resposta.