Olá, amigos do iMasters, este é meu segundo artigo no site (o primeiro falava sobre paginação com Ajax) e gostaria de compartilhar com vocês uma maneira bem simples e rápida de realizar buscas dinâmicas no seu site/sistema.
Neste exemplo, o usuário digita o país desejado e uma lista de opções é carregada. Logo depois clica com o mouse e a opção é mandada para o input. A partir deste artigo você poderá criar muitas variações do mesmo para satisfazer a sua necessidade.
Utilizarei p PHP com a Biblioteca javascript JQuery na sua implementação, espero que aproveitem. Lembrando que discorrerei somente sobre algumas linhas do mesmo e no final deste artigo disponibilizarei o código para download. Vamos lá então:
1º Passo: Index.php – aqui precisamos realizar a chamada do Jquery e criar a função que busca os dados no nosso busca_paises.php. A função lookup carrega a lista e a função fill manda o item da lista clicado pelo mouse para o nosso input.
<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("busca_pais.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>2º Passo: No mesmo index.php – temos nosso input onde digitamos a nossa busca e a div autoSuggestionsList onde a lista será carregada pelo Ajax.
<form>
Digite o país:
<br />
<input type="text" size="30" value="" id="inputString" onKeyUp="lookup(this.value);" onBlur="fill();" />
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</form>3º Passo: busca_pais.php – este arquivo é onde buscamos os dados para listá-los no nosso autocomplete. Inicialmente nos conectamos ao nosso banco de dados.
$conn = mysql_connect("servidor","usuario","senha") or die ("Erro ao se conectar ao servidor");
$bd = mysql_select_db("banco") or die ("Erro ao se conectar ao banco");agora realizamos nossa consulta no banco com base no que é digitado no nosso input
if(isset($_POST['queryString'])) {
$queryString = $_POST['queryString'];
if(strlen($queryString) >0) {
$query = mysql_query("SELECT nome FROM paises WHERE nome LIKE '$queryString%' LIMIT 10") or die("Erro na consulta");
while ($result = mysql_fetch_array($query)) {
echo '<li onClick="fill(\''.$result[0].'\');">'.$result[0].'</li>';
}
}
} Bem, amigos, é isso aí! Espero que aproveitem!!
Grande abraço!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?