02 May 08 Autocomplete para rails com jquery muito fácil!

No último projeto que estou trabalhando, resolvi utilizar jQuery em vez do prototype padrão …

E eu precisava de um campo de texto com auto completar, e mesmo que estivesse utilizando o prototype, não seria muito fácil utilizar o plugin de autocomplete do rails por que eu precisava deste auto complete em um campo de texto que existe diversas vezes dentro do mesmo form, e novos são adicionados via RJS, isto complicava muito a minha vida por que o ID destes campos adicionados automagicamente é o mesmo …

Como estava utilizando o jQuery, atravéz do plugin jRails isto se tornou muito fácil, bastou utilizar o plugin suggest do proprio jQuery …

O processo para habilitar este autocomplete é bem simples como vocês podem ver abaixo.
Primeiro, instalando o plugin jRails:
script/plugin install http://ennerchi.googlecode.com/svn/trunk/plugins/jrails rake jrails:install:javascripts
Com isto podemos começar a brincar com os plugins do jQuery, para utilizar o plugin suggest, basta fazer o download dele, colocar o css na pasta public/stylesheets e o js na pasta public/javascripts da aplicação …
Ai vamos editar o layout padrão da aplicação, e ter certeza de que ele inclui as seguintes linhas:

1
2
3

  <%= stylesheet_link_tag 'jquery.suggest.css' %>
  <%= javascript_include_tag :defaults %>
  <%= javascript_include_tag "jquery.suggest.js" %>

Depois disto, em qualquer formulário, para ativar o suggest, basta colocar um text_field padrão do rails com o seguinte código (este bloco veio de dentro de um form_for):

1	<%= inf.text_field :name, :onfocus => "$(this).suggest('#{formatted_examples_url(:js)}')", :index => nil %>

assim, o suggest vai ser ativado para este campo quando o usuário entrar no campo, independente de se ja existe outro campo com o mesmo ID (sim, eu sei que não deveriam existir objetos com o mesmo ID, mas neste caso não tenho muito como evitar isto … )
Agora no controller …
Tenho o controller examples mapeado como um resource padrão no rails, e editei o método index dele para ficar parecido com isto:

  def index
    @examples = Example.paginate :page => params[:page], :conditions => ["name like ?","%#{params[:q]}%"]
 
    respond_to do |format|
      format.html # index.html.erb
      format.xml  { render :xml => @examples }
      format.js
    end
  end

basicamente a única alteração do controller padrão foi adicionar a linha format.js e adicionei a condition para filtrar a consulta …
depois disto criei o arquivo “index.js.erb” com o seguinte conteúdo (sim, eu podia fazer um render :inline mas não gosto muito da idéia )

1	<%= @examples.collect(&:name).join("\n") %>

fazendo com que o resultado desta action quando chamada com a extensão “js” fosse apenas uma listagem com um nome por linha …

Tudo pronto, autocomplete funcionando
Achei mais simples do que o plugin padrão do rails para autocomplete

PS.: cada vez eu acho o jQuery mais legal de trabalhar, to curtindo mais ele do que o prototype.

If you enjoyed this post, make sure you subscribe to my RSS feed!

Tags: autocomplete, jquery, rails, Ruby

Filed in rails

Reader's Comments

Tiago Albineli Motta | 05 May 2008 3:27 pm
Muito interessante. Sempre preferi usar o JQuery ao invés do prototype, e agora que estou começando com rails vou dar uma olhada nesse plugin.

[Tradutor]
Reply to this comment
Firebug avança com suporte a diversos browsers « rafa.rocha | 30 May 2008 2:58 am
[...] Simplicação de código no uso do Rails ao invés do Prototype por Urubatan [...]

[Tradutor]
Reply to this comment
Cássio Marques | 30 May 2008 10:14 am
Urubatan, o que tem no helper formatted_examples_url(:js) ?

Abraço!

[Tradutor]
Reply to this comment
Rodrigo Urubatan | 30 May 2008 10:21 am
É um helper padrão de rotas nomeadas REST do rails 2.x+
neste caso ele só vai renderizar a URL /examples.js

[Tradutor]
Reply to this comment
Luiz Arão A. Carvalho | 30 Jun 2008 5:47 pm
Otimo.
para fazer com o prototype dava uma cançeira danada.
vou tentar com JQuery
abraços

[Tradutor]
Reply to this comment
Luiz Arão Araújo Carvalho | 02 Jul 2008 9:44 am
Nossa uma vez tentei fazer esse autocomplete com prototype.
muuuito trabalho
agora segui esse seu post O.o
funcionou de primiera
vlw

[Tradutor]
Reply to this comment
de musicas | 09 Dec 2008 10:42 pm
então, não tem para wordpress???
na forma de plugin???

[Tradutor]
Reply to this comment
Fábio Tadeu da Costa | 08 Mar 2009 11:54 am
Sou iniciante em Rails e gostaria de saber como pegar o conteúdo gerado por uma def e usá-lo como fonte de dados para o suggest?

Por exemplo, no meu controller eu criar:
def suggest
end

e pegar o conteúdo gerado para passar como fnte de dados para o autocomplete.

Obrigado

[Tradutor]
Reply to this comment
- Urubatan | 09 Mar 2009 5:27 pm
  Fábio,
  é exatamente isto que este exemplo faz, só que em vez da renderização estar dentro do código Ruby, foi utilizado um arquivo externo .js.erb para renderizar o conteúdo pro suggest …
  
  [Tradutor]
  Reply to this comment
Murilo | 04 Apr 2009 5:49 pm
Maneiro era o que estava procurando =D

abraço

[Tradutor]
Reply to this comment
Davi Amaral | 01 Jun 2009 10:17 am
Cara…
Gostei dessa…
Melhor mesmo q o prototype…

Só q ja fiz o projeto inteiro em prototype, sei q posso usar os dois…
Mas vou ter q carregar mais um .js….
Vai ficar apesado !

[Tradutor]
Reply to this comment
Ricard | 04 Aug 2009 3:11 pm
Blz Urubatan?

Estou com dificuldade para implementar o codigo acima.

Nao entendi a seguinte parte

“$(this).suggest(‘#{formatted_examples_url(:js)}’)”, :index => nil %>

O que seria o formatted_examples_url(:js) ?

Vlw

[Tradutor]
Reply to this comment
- Urubatan | 04 Aug 2009 3:24 pm
  formatted_examples_url é uma chamada do rails que retorna a URL para o controller “examples” para o content type especificado, neste caso javascript.
  mas se não me engano este método vai deixar de existir no rails 3.0
  
  [Tradutor]
  Reply to this comment
Paulo | 27 Mar 2010 2:32 pm
Interesante eu fiz todo o tutorial, porém o meu não carregou, é como se ele não estivesse renderizando quando digito o que quero buscar no text field.

Eu acesso o arquivo categorias.js e ele lista tudo, mas quando digito no text_field não aparece nada, me dá um help.

Código index.js.erb

Formulario no partial
“$(this).suggest(‘#{categorias_url(:js)}’)”, :index => nil%>

Controller Categorias
@categorias = Categoria.find(:all, :conditions => ["descricao like ?","%#{params[:q]}%”])

e embaixo o format.js

[Tradutor]
Reply to this comment
Davi Amaral | 09 Apr 2010 4:26 pm
Cara, acho q to sendo meio noob.
Não entendi muito bem não;

vou colocar minha dúvida :

Tenho o controller : new

class NewController < ApplicationController

def list

end

end

na minha view List tem :

‘listaname’,:html => {:id => “form” , :name => “form”}, :url=>{:action=>’listing’, :id=>@item } do %>

No caso tenho alguns campos que preciso de auto complete.

São eles :

===> esse é referente a tabela news

===> esse é referente a tabela sectors

===> esse é referente a tabela fonts

Como devo proceder nesses casos?

[Tradutor]
Reply to this comment