Categorias
AJAX campo de auto-sugestão
Olá pessoal, é com muito prazer que inicio aqui no HelpMasters meu primeiro artigo. Fui convidado e aqui estou para abordar essencialmente sobre o assunto que gosto mais: Javascript e XHTML.
Uma rápida apresentação: eu sou Henrique Araujo, web designer há 7 anos, programador para a Web não atuante e freelancer. Quem quiser saber mais detalhes estão convidados ao meu site.
Bom, muita gente já ouviu falar do "tal AJAX", acredito que alguns já leram alguma coisa à respeito, e alguns outros já tentaram criar algo, porém ele não é algo pra lá de muito prático de se entender. Trago então uma readaptação de um artigo que escrevi há um tempo atrás explicando como criar algo simples com a tecnologia, que nada mais é do que Javascript + HTML + linguagem server-side.
1º passo Crie uma página HTML e a ela dê o nome "form.html"
Insira nela o código e confira a explicação para cada pedaço de código:
<html>
<script type=”text/javascript”>
var http = false;
/*
Este bloco IF é necessário antes de começar qualquer implementação do AJAX. Ele cria os objetos específicos de cada navegador para manipulação das solicitações ao servidor. Os navegadores Mozilla Firefox, Safari, Opera e Konqueror atualmente usam XMLHttpRequest, que é com um objeto JavaScript nativo. O Internet Explorer foge desta regra e implementa o recurso ActiveX. É por isso que a forma de se iniciar uma implementação de AJAX nas páginas acontece de forma diferente.
*/
if(navigator.appName == “Microsoft Internet Explorer”) {
http = new ActiveXObject(”Microsoft.XMLHTTP”);
} else {
http = new XMLHttpRequest();
}
/*
Esta aqui é a função da nossa mini lógica de negócio. Ela vai receber a entrada do usuário através do campo texto chamado “nome”. Lá no campo “nome’, à medida que uma tecla é digitada a função “procurar()” vai ser acionada (onKeyUp=”procurar(this.value)”), ou seja, a cada entrada do usuário o Javascript será acionado e enviará de forma totalmente rápida e transparente os dados para a função PHP, que faremos logo adiante; assim, em milissegundos a coisa vai acontecer.
*/
function procurar(nome) {
http.open(”GET”, “buscaPessoas.php?nome=” + nome, true);
http.onreadystatechange=function() {
if(http.readyState == 4) {
document.getElementById(’labelNome’).innerHTML = http.responseText;
}
}
http.send(null);
}
/*
O objeto (http) criado acima vai receber os parametros semelhantes à um formulário normal <form>: método de submissão e página que receberá os dados do form. O “onreadystatechange” manipula eventos na página, normalmente uma chamada qualquer a uma função JavaScript. O “readystate” determina a situação atual da solicitação. Varia de 0 a 4, sendo 0 não-iniciada; 1 carregando, 2 carregada, 3 em processamento, 4 concluída. Iremos passar portanto, quando a página estiver concluída (status 4) o resultado da nossa futura função php no “labelNome”. Daí o “http.send” envia a solicitação ao servidor, podendo passar algum parâmetro, o que não é o nosso caso, já que estamos fazendo um “GET” e passando parâmetro via URL (”nome”).
*/
</script>
<!–
Aqui nosso campo nome e o método que acionará a função procurar() que criamos acima. A cada tecla digitada a função Javacript vai ser acionada, que consequentemente fará a página buscaPessoas.php enviar o valor do campo para ser consultado… isso veremos ali na frente.
-–>
Buscar um nome: <input type=”text” name=”nome” size=”12″ onKeyUp=”procurar(this.value)”> <span id=”labelNome”></span>
</html>
Com isso temos o formulário e as funções necessárias à auto-sugestão do lado do cliente. Próximo passo é implementar código server-side que devido à interação com o Javascript se assemelhará à client-side para você.
2º passo Crie uma página PHP e a ela dê o nome de "buscaPessoas.php"
Insira nela o código abaixo e confira a explicação para cada pedaço de código mais uma vez:
<?php
/*
Se você tem um banco MYSQL à disposição, vamos usá-lo. Teste se consegue conectar, e vamos em frente…
*/
function sugerir($nome) {
//crie a sua conexão php ao seu banco, neste exemplo usei MYSQL:
mysql_connect(”enderecodoseubanco”,”login”,”senha”);
mysql_select_db(”nomedoseubanco”);
/*
crie uma tabela “usuario” e uma coluna “nome”. Daí você insere uns nomes lá para utilizarmos aqui. Então, faz um Select procurando por nomes que contenham o que foi digitado lá no formulário pelo usuário. Sobre o “like” do SQL , ele significa: com o termo, e as porcentagens descartam início e fim deste trecho, podendo ele estar no meio de uma palavra.
*/
$sql = “SELECT nome FROM usuario where nome like ‘%” . $nome . “%’” ;
$qry = mysql_query($sql); //faz a consulta...
$linha = mysql_fetch_array($qry); //joga o conjunto de resultados numa variável
$num = mysql_num_rows($qry); //traz o número de linhas retornadas
/*
Se nada for digitado no campo ou a consulta não retornar resultados, mostra-se uma mensagem (opcional – você pode deixar em branco se quiser). Se conseguiu encontrar um registro que bateu lá no banco, então mostra pra o usuário.
*/
if($nome == “” || $num == 0) {
return ‘Ops! nada encontrado.’;
} else {
return $linha['nome'];
}
}
//Aqui mandamos o php utilizar o que chegou pela URL (nossa função “procurar(nome)”)
echo sugerir($_REQUEST['nome']);?>
Assim finalizamos o campo Auto-sugestão em AJAX. Espero que tenham gostado e até a próxima!
segunda-feira, 04 de janeiro de 2010
547 Vizualizações
2 Comentários
-
sugerindo varias opçoes
02/02/2010 - 12:32, nikolas | #
olá amigo gostaria que vc mostrasse como sugerir em varias opçoes, tipo em lista de zebra, blz
mas ta muito bom o tuto -
Duvida
04/02/2010 - 16:09, Henrique | #
Nikolas, não ficou muito claro pra mim o que você sugeriu, ok?
Comente :
Henrique Araujo
Web designer há 7 anos, formado em Sistemas de Informação é atualmente analista de sistemas Outsourcing da IVIA (www.ivia.com.br) e desenvolvedor freelancer para Web. É também, de forma complementar, programador Javascript, PHP e ASP.
www.HelpMasters.com.br | Todos os direitos reservados