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:

1
2
3
4
5
6
7
8
9

  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 …

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

Se você gostou deste post, lembre-se de assinar o RSS feed do blog, para ser notificado de novos posts!