Tableless - Desenvolvimento inteligente com Padrões Web

27/01/2006
Artigos

Auto-completar Ajax como o Google Suggest

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 …

Por

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!

Por Elcio Ferreira

http://elcio.com.br/

Veja os outros posts de

  • http://www.cosmeweb.com.br/blog/ CosmeWeb
  • Júnior

    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.

  • http://elcio.com.br/ Elcio

    Ôxi, Júnior, de onde você tirou a idéia de que não é correto?

  • Marcel

    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 !

  • http://elcio.com.br/ Elcio

    Onde vocês leram isso?

    Vejam a seção 7.9:
    http://www.ecma-international.org/publications/standards/Ecma-262.htm

  • Marcel

    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

    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!

  • http://www.csslab.cl brujo

    e o tema do idioma… eh sempre em ingles?? havera q traduzir algum DB para os diferentes idiomas?

  • Nagib Kanaan

    Diogo, eu fiz uma correção nesta sua versão :D

    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 :D

    Se tiveres como entrara em contato comigo, no momento não tenho onde publicar a classe modificada (actb.js).

    vlw :D

  • http://www.inf.unioeste.br/~alebattisti anselmo battisti

    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.

  • http://www.inf.unioeste.br/~alebattisti anselmo battisti

    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

  • http://inf.unioeste.br/~alebattisti anselmo battisti

    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?

  • http://www.geekshouse.com.br Ygor Lemos

    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

  • http://www.geekshouse.com.br Ygor Lemos

    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

  • http://www.rvg.com.br Ricardo

    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

    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

    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 /* */.

  • http://www.rafaeldohms.com.br Rafael Dohms

    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/

  • http://www.erlimar.info Erlimar

    Sobre javascript em PT-BR: http://pt.wikipedia.org/wiki/Javascript

  • http://www.buscarletras.com.br/ de musicas

    valeu, vou estudar mais sobre isso..

  • Pingback: Ajax: threads ? processo ? « Catojo.

  • Werter

    Uma forma simples de fazer é com Jquery
    (http://docs.jquery.com/UI/Autocomplete)