Olá amigos,
continuando com as séries do JQuery no Blog. Hoje irei falar um pouco de como desenvolver um pequeno aplicativo para criar um Autocomplete em um form do tipo texto, os mesmos utilizados por grandes sites, como Google,Yahoo, UOL entre outros. Basicamente é uma consulta em banco de dados, em tempo real com JQuery, e de acordo com o que você digitar, ele fará uma busca e irá apresentar, dinâmicamente, os dados abaixo do form para seleção. Você poderá observar isso no site do Google quando tenta faze ruma busca ou mesmo na barra de ferramentas do Google.
Vamos lá?
Primeiro iremos criar o arquivo index.php, clássico né, vamos lá?
Primeiro vamos vincular a biblioteca JQuery a nosso arquivo index.php
<script type=”text/javascript” src=”jquery-1.4.2.js”></script>
Aqui temos as funções que irão nos auxiliar para realizar as buscas e colocar a informação no local certo.
<script type=”text/javascript”>
function lookup(inputString) {
// Aqui você pode perceber que o inputString é a nossa regra de busca,
// Que será usada no select dos dados mais a frente.
if(inputString.length == 0) {
$(‘#suggestions’).hide(); // Esta marcação indica que as sugestões serão escondidas se não ouver palavras digitadas./
} else {
// Se tiver palavras digitadasno campo, a string de busca é enviada para o arquivo que processa a
// Solicitaçãochamado dados.php
$.post(“dados.php”, {queryString: “”+inputString+”"},
function(data){
if(data.length >0) {
$(‘#suggestions’).show();
$(‘#autoSuggestionsList’).html(data);
}
}
);
}
} // lookup
function fill(thisValue) {
$(‘#inputString’).val(thisValue);
setTimeout(“$(‘#suggestions’).hide();”, 0);
}
</script>
