LookingFor

Simple ajax search form.

Installation

Add this line to your application's Gemfile:

gem 'looking_for'

And then execute:

$ bundle

Or install it yourself as:

$ gem install looking_for

Assets

In application.js add

//= require looking_for

In application.css add

*= require looking_for

You can use the Themeroller (http://jqueryui.com/themeroller/) to define and download an appropriate css file and the pictures needed. Add the downloaded Themeroller css file to the css assets and add the Themeroller images to the image assets.

Adding a touch of style to LookingFor element

Example, in your application css add:

#looking_for-toolbar {
  margin-bottom: 0.5em;
}

#looking_for-header .cell {
  font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;
  color: #ffffff;
  background-color: #5c9ccc;
}

#looking_for-filter .cell {
  padding: 0.1em;
}

#looking_for-results a {
  font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
  font-size: 1em;
  color: inherit;
  background-color: inherit;
  display: block;
  text-decoration: none;
}

#looking_for-results .row:hover {
  color: #fff;
  background-color: #ff8000;
}

#looking_for-results .even {
  color: #5c9ccc;
  background-color: #dff;
}

#looking_for-results .odd {
  color: #5c9ccc;
  background-color: #ffd;
}

#looking_for-pagination .page_info {
  margin-top: 0.5em;
  color: #5c9ccc;
  text-align: left;
}

#looking_for-pagination .page_info b {
  color: #6aa6ed;
}

Usage

Looking For Helper

Creates a link tag to open LookingFor search form with the given options.

Signatures
looking_for(object_name, method_names, link_body, options = {}, html_options = {})
  • object_name - A model name, for example 'Item' or a collection in a one-to-many association (for example 'user.items' if user has many items).
  • method_names - An array of method names for build the results columns (for example [:id, :code, :description] if id, code, description are attributues of object_name)
  • link_body - The link body
options
  • :fill - Fill html input with value from database ( db_field => input_tag_id ) when a row is selected.
  • :width - Width of dialog, optional, default 500px.
  • :height - Height of dialog, optional, default 300px.
html_options

Like html_options in link_to helper but :remote will be always true.

Examples

In your application generate a scaffold for the Item resource :

rails generate scaffold Item code:string description:string
rake db:migrate 

In a view put this code:

<%= text_field_tag :item_id , '', :name => "looking_for_filter[id]" , :class => :looking_for, :looking_for_id => 'looking_for_items' %>
<%= looking_for 'Item', 
                [:id,:code,:description],
                'Search',
                { :fill   => {:id          => :item_id,
                              :code        => :item_code,
                              :description => :item_description},
                  :width  => 550,
                  :height => 360},
                :id   => 'looking_for_items' %>
<%= text_field_tag :item_code       , "", :name => "looking_for_filter[code]"       , :class => :looking_for, :looking_for_id => 'looking_for_items' %>
<%= text_field_tag :item_description, "", :name => "looking_for_filter[description]", :class => :looking_for, :looking_for_id => 'looking_for_items' %>

Start web server and try it!

TODO:

  • Add column sorting
  • More options for each column, for example width, min_width, max_width.
  • Drill-down rows
  • Inline editing
  • ....