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
- ....