Algumas pessoas tem escrito perguntando como se produz um efeito semelhante ao Google Suggest. Esta série de artigos e o script que a acompanha são uma maneira de tentar responder a esta dúvida.
Como você pode ver lá, é o início do trabalho. Pretendo ter tudo pronto em duas semanas. Colaborações são muito bem vindas!
22 Comentários
22 Comentários
CosmeWeb 27/01/2006 às 18:47
Tiago Madeira fez algo parecido:
http://tiagomadeira.net/2006/01/03/livesearch-no-wordpress/
Júnior 30/01/2006 às 08:59
ficou faltando ponto e vírgula em todo Js…. ok ok, funciona? sim, funciona… mais não é correto, neh?
abraços e parabéns pelo site.
Elcio 30/01/2006 às 10:48
Ôxi, Júnior, de onde você tirou a idéia de que não é correto?
Marcel 30/01/2006 às 11:53
Elcio,
Creio que seja das especificações da linguagem JavaScript, que por ventura é baseada na sintaxe da linguagem C, que por sua vez tem como separador de comandos exatamente o ;
Navegadores mais antigos podem não interpretar corretamente seu script sem ; nos finais !
Elcio 30/01/2006 às 12:08
Onde vocês leram isso?
Vejam a seção 7.9:
http://www.ecma-international.org/publications/standards/Ecma-262.htm
Marcel 30/01/2006 às 15:26
Existem 2 maneiras de se separar expressões em JavaScript. A primeira é a original ; , que vem dos primordios e é herdada diretamente da linguagem Java (de onde vem o JAVAScript), que por sua vez tem sua herança na linguagem C.
A segunda é a famigerada quebra de linha, que vem do JScript, que é a linguagem pela qual o JavaScript é interpretado pelos browsers Microsoft.
Claro, os browsers atuais interpretam ambos… Mas ESTETICAMENTE é desagradável.
Ahh, a tempo: o ECMAScript não é exatamente javascript:
“This ECMA Standard is based on several originating technologies, the most well known being JavaScript (Netscape)
and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that
company’s Navigator 2.0 browser. ”
Em tradução livre:
“O padrão ECMA é baseado em várias tecnologias, a mais conhecida é a JavaScript (Netscape) e JScript (Microsoft). ”
Eu acho que isto quer dizer que o ECMA é um padrão à parte baseado na linguagem citada, mas que não é padrão para a linguagem JavaScript
diogo86 30/01/2006 às 18:37
há algum tempo eu achei o script actb (http://www.codeproject.com/jscript/jsactb.asp), que era baseado em uma array fixa.
fiz alguns testes pra adaptar ele para uma array dinâmica:
http://diogo86.no-ip.org/~diogo86/testes/actbxml2/testexml.html
o código do actb em si é meio grande, e acho que ainda piorei tudo com algumas funções pra debug, rsrsrs. mas acho que se for o caso de usar em produção dá pra organizar um pouco a bagunça.
absd!
brujo 31/01/2006 às 13:07
e o tema do idioma… eh sempre em ingles?? havera q traduzir algum DB para os diferentes idiomas?
Nagib Kanaan 21/02/2006 às 16:41
Diogo, eu fiz uma correção nesta sua versão
Quando um “select” fica “abaixo” (na realidade fica por cima) do table q ele cria, ele esconde parte do table… eu fiz essa correção agora pode colocar onde quiser o “text” com a função de auto completar
Se tiveres como entrara em contato comigo, no momento não tenho onde publicar a classe modificada (actb.js).
vlw
anselmo battisti 23/02/2006 às 18:27
funcionou perfeiramente, algumas coisas ficaram bem implícitas em sua explicação mas esta tudo correto.
estou com o seguinte problema:
quando a minha sql retorna algo como ç ã é no lugar ficam aqueles maledetos cubinhos.
se eu olho o resultado da consulta eles estao certos, fica errado dentro da caixa de texto com as opções filtradas
se puder dar uma dica fico grato.
anselmo battisti 24/02/2006 às 10:26
a solução que encontrei pro problema anterior foi substituir os caracteres especiais pelos correspondetes em HTML no meu codigo em PHP
tabela com os correspodentes
http://www.lsi.usp.br/~help/html/iso.html
anselmo battisti 01/03/2006 às 21:49
pessoal estou com um problema.
quando eu clico na lista ele nao coloca o valor dentro do campo.
existe algum problema em trocar o nome de input?
Ygor Lemos 24/03/2006 às 16:37
Marcel,
O Javascript não veio do Java, sua implementação veio diretamente do conceito de orientação á objetos em plataformas web, conceituado pela Netscape. O Javascript, chamava-se Mocha, depois foi conhecido como LiveScript e então batizado como Javascript, sem ter nenhuma ligação ou correlação com a linguagem Java da Sun Microsystems, pois se você observar, os modelos e os prtótipos da linguagem divergem totalmente uma da outra. A única relação entre as linguagens é uma pequena herança de sintaxe.
E sim, o Javascript é ECMAScript, ou pelo meno iniciou-se assim, como o padrão ECMA-262, considere as especificações ECMA como núcleo do Javascript. Hoje em dia porém, com a implementação da nova DOM, o Javascript saiu dos padrões ECMA e estabeleceu uma linha de padrões próprios como linguagem, mas não deixa de ter grande parte de seu núcleo, com restos desta implementação. (um bom lugar para observar isso é dando uma vasculhado no código fonte da Gecko Engine que está contido no Firefox por exemplo).
Para quem souber inglês e quiser saber melhor a história do Javascript desde seus primórdios como Mocha, vai ai a dica:
http://en.wikipedia.org/wiki/Javascript
Valew,
Ygor Lemos
Ygor Lemos 24/03/2006 às 16:39
Vai ai uma dica também, de uma aplicação igual a discutida aqui no tópico:
http://wiki.lumrix.net/en/
O Lumrix, é um autocomplete engine, que utiliza o banco de dados da wikipedia.
Mto legal o projeto!
Abraços,
Ygor Lemos
Ricardo 11/05/2006 às 15:15
Olá,
Fiz tudo como está no artigo, porém não funciona, dá erro de sintaxe na linha 27 do include autocompletar.js.
Alguma idéia?
Henrique 24/05/2006 às 05:50
Tem um site que faz algo semelhante tbm. Passo a passo explica como faz.
Cloning Google Suggest with AjaxAC
http://www.phpriot.com/d/articles/php/application-design/google-suggest-ajaxac/page1.html
ferdinandogalera 19/06/2006 às 18:40
So para acrescentar ao caso do ponto e virgula, ele eh importante sim, no caso de se querer deixar tudo numa linha so, para “proteger” o codigo fonte, sem ele, o codigo nao funciona, sem falar das // tem que trocar por /* */.
Rafael Dohms 03/08/2006 às 12:19
Eu implementei um script destes. Inclusive com navegação pelo teclado utilizando as setas, e está estavel para produção:
http://www.rafaeldohms.com.br/2006/07/10/dmsautocomplete/pt/
Erlimar 13/10/2006 às 16:58
Sobre javascript em PT-BR: http://pt.wikipedia.org/wiki/Javascript
de musicas 09/12/2008 às 23:30
valeu, vou estudar mais sobre isso..
Ajax: threads ? processo ? « Catojo. 11/04/2009 às 18:52
[...] http://www.tableless.com.br/auto-completar-ajax-como-o-google-suggest [...]
Werter 02/08/2010 às 15:55
Uma forma simples de fazer é com Jquery
(http://docs.jquery.com/UI/Autocomplete)