Busca Dinamica AJAX + Ruby on Rails

Opa hoje vou falar de um assunto super eficaz uma busca onde onde vc vai digitando e ele vai filtrando as infomacoes para você
vamos la então
vamos começar criando um arquivo na sua view bem simples chamado busca_index.erb
vamos criar uma routs
projeto/config/routes.rb
o nome da minha tabela eh produtos dai fica algo assiminfomacoes

ActionController::Routing::Routes.draw do |map|

  map.resources :produtos, :collection => {:busca_index => :get};

  map.connect ':controller/:action/:id'
  map.connect ':controller/:action/:id.:format'
end

dai vamos criar um method no nosso controller

app/controllers/produtos_controller.rb

def busca_index
 @produtos = CompraProduto.find(:all, :conditions => ["produto LIKE ?","%#{params[:busca]}%"])
end

agora vamos editar nossa view index busca_index
primeiro nossa index
vamos dar uma limpada e deixar somente o form da busca
algo tipo

<h1>Listing compra_produtos</h1>
 <%form_tag busca_index_produtos_path, :method => "get" do%>
 <input id="busca" name="busca" type="text" onKeyUp="pesquisa(this.value)"/>
 <%=submit_tag "Buscar"%>
 <% end %>

criei uma input html mesmo usando uma função javascript (OnKeyUp)
agora que vem a parte mais interessante
nessa view mesmo vamos criar um tag script para por nosso javascript e nosso ajax
vamos la, vai ficar algo assim.

<script>

function pesquisa(valor)

{

//FUNÇÃO QUE MONTA A URL E CHAMA A FUNÇÃO AJAX
//aqui ele vai montando a busca
url="/compra_produtos/busca_index?busca="+valor+"&commit=Buscar";

ajax(url);

}

function ajax(url)

{

//alert(nick);

//alert(dest);

//alert(msg);

req = null;

// Procura por um objeto nativo (Mozilla/Safari)

if (window.XMLHttpRequest) {

req = new XMLHttpRequest();

req.onreadystatechange = processReqChange;

req.open("GET",url,true);

req.send(null);

// Procura por uma versão ActiveX (IE)

} else if (window.ActiveXObject) {

req = new ActiveXObject("Microsoft.XMLHTTP");

if (req) {

req.onreadystatechange = processReqChange;

req.open("GET",url,true);

req.send();

}

}

}

function processReqChange()

{

// apenas quando o estado for "completado"

if (req.readyState == 4) {

// apenas se o servidor retornar "OK"

if (req.status ==200) {

// procura pela div id="pagina" e insere o conteudo

// retornado nela, como texto HTML

document.getElementById('pagina').innerHTML = req.responseText;

} else {

alert("Houve um problema ao obter os dados:n" + req.statusText);

}

}

}
</script>

agora vamos mexer no nosso arquvo busca_index

<table>
 <tr>
 <th>Compra</th>
 <th>Produto</th>
 <th>Valor</th>
 </tr>

<% for compra_produto in produtos %>
 <tr>
 <td><%=h compra_produto.compra_id %></td>
 <td><%=h compra_produto.produto %></td>
 <td><%=h compra_produto.valor %></td>
 <td><%= link_to 'Show', compra_produto %></td>
 <td><%= link_to 'Edit', edit_compra_produto_path(compra_produto) %></td>
 <td><%= link_to 'Destroy', compra_produto, :confirm => 'Are you sure?', :method => :delete %></td>
 </tr>
<% end %>
</table>

bem secao heheh e para finalizar adcinar na view index a div pagina assim

<h1>Listing compra_produtos</h1>
 <%form_tag busca_index_compra_produtos_path, :method => "get" do%>
 <input id="busca" name="busca" type="text" onKeyUp="pesquisa(this.value)"/>

 <%=submit_tag "Buscar"%>

 <% end %>

<div id="pagina">
</div>

<script>

function pesquisa(valor)

{

//FUNÇÃO QUE MONTA A URL E CHAMA A FUNÇÃO AJAX

url="/compra_produtos/busca_index?busca="+valor+"&commit=Buscar";

ajax(url);

}

function ajax(url)

{

//alert(nick);

//alert(dest);

//alert(msg);

req = null;

// Procura por um objeto nativo (Mozilla/Safari)

if (window.XMLHttpRequest) {

req = new XMLHttpRequest();

req.onreadystatechange = processReqChange;

req.open("GET",url,true);

req.send(null);

// Procura por uma versão ActiveX (IE)

} else if (window.ActiveXObject) {

req = new ActiveXObject("Microsoft.XMLHTTP");

if (req) {

req.onreadystatechange = processReqChange;

req.open("GET",url,true);

req.send();

}

}

}

function processReqChange()

{

// apenas quando o estado for "completado"

if (req.readyState == 4) {

// apenas se o servidor retornar "OK"

if (req.status ==200) {

// procura pela div id="pagina" e insere o conteudo

// retornado nela, como texto HTML

document.getElementById('pagina').innerHTML = req.responseText;

} else {

alert("Houve um problema ao obter os dados:n" + req.statusText);

}

}

}
</script>

e ta pronto desculpem a falta de detalhes mas qualquer duvida só postar ai beleza, valeu galera ate a próxima abraco
>>>> DRY >>>