Hacer una búsqueda dinámica para que vayan apareciendo los resultados a medida que escribimos en el formulario es relativamente sencillo con rails.
Para ello sólo necesitamos los siguientes elementos:
Primero de todo necesitamos cargar los elementos ‘ajaxianos’ que vienen con rails. Para ello basta con incluir:
<%= javascript_include_tag :defauts %>
Generalmente es una buena práctica incluir este tag en el layout general, pero eso depende de cada uno.
Vista:
<% form_tag 'search' do %>
<div class="table_title">
<table>
<tr>
<td>Buscar:</td>
<td><%= text_field_tag("query", params[:query], :autocomplete => "off" ) %></td>
</tr>
</table>
</div>
<% end %>
<%= observe_field 'query', :frequency => 2,
:update => search_results",
:url => {:controller => "friends", :action => "search"},
:with => "query" %>
<div id="search_results">
</div>
Con esto definimos un campo de búsqueda llamado query donde iremos haciendo las búsquedas.
Adicionalmente con observe_field indicamos que debemos realizar cada cierto tiempo una búsqueda con los parámetros de query usando la acción search del controlador friends.
Y también definimos un div llamado search_results, inicialmente vacío, que será actualizado con los resultados de esa búsqueda.
Controller:
def search
session[:query] = params[:query].strip if params[:query]
if session[:query] and request.xhr?
@friends = Friend.all(:conditions => ["first_name LIKE ?", "%#{session[:query]}%"], :order => "first_name ASC")
render :partial => "search_results", :layout => false, :locals => {:searchresults => @friends}
end
end
Donde hacemos una búsqueda con los parámetros que hemos obtenido desde nuestra vista y la presentamos en un partial llamado search_results pasándole los resultados de la búsqueda.
El código de este partial puede ser a gusto de cada uno, simplemente debe presentar los resultados.
Un ejemplo sería:
<% if searchresults.length == 0 %>
<p>No se han encontrado resultados</p>
<% elsif params[:query] == "" %>
<p>No hay términos de búsqueda</p>
<% else %>
<div class ="search_results">
<strong>Amigos Encontrados:</strong>
<table>
<% for friend in searchresults %>
<tr>
<td>
<%=friend.last_name%>, <%=friend.first_name%>
</td>
</tr>
<% end %>
</table>
</div>
<% end %>
Modelo:
Un modelo básico que nos serviría para este ejemplo sería algo así.
class CreateUsers < ActiveRecord::Migration
def self.up
create_table (:friends,:options => 'DEFAULT CHARSET=UTF8') do |t|
t.column :first_name, :string
t.column :last_name, :string
t.timestamps
end
end
def self.down
drop_table :friends
end
end
Y eso sería todo, ya tenemos una búsqueda dinámica en menos de 5 minutos.
Enjoy
