Flexselect replaces a select control with a textbox control where you can type anything. While typing, flexselect will instantly show you a list of corresponding matches within the select list. The main advantage of this control is to allow the instant search in a long list of options (replacing the painfull user-experience which leads to display annoyances with a normal select control). You can type characters in any order and flexselect will still show you a match. If the user has javascript disabled, the normal select control will render and your page will still work.
For the tutorial, a small application will be build from scratch :
1. In the console, type
rails flexselectdemo
You will notice the usage of the default sqlite3 database (you can change database.yml in /config to use any other database adapter).
2. create a basic scaffold for a post
ruby script/generate scaffold post name:string author:string
3. Edit the view to add the jquery framework and flexselect stylesheets in the head section
<%= stylesheet_link_tag 'scaffold' %> <%= stylesheet_link_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css", :media => "screen", :cache => true %> <%= stylesheet_link_tag 'flexselect', :media => "screen", :cache => true %>
4. Edit the view to add the jquery framework and flexselect javascripts at the end of your body section
<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js",:cache => true %>
<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js",:cache => true %>
<%= javascript_include_tag "application", :cache => true %>
<%= javascript_include_tag "flexselect/liquidmetal", :cache => true %>
<%= javascript_include_tag "flexselect/jquery.flexselect", :cache => true %>
5. Copy the files from the flexselect plugin to the relevant public directories:
the jquery.flexselect.js and liquidmetal.js files go to your public/javascripts/flexselect/ directory
the flexselect.css file goes to your public/stylesheets directory
6. Edit the post edit view:
Replace
<%= f.label :author %>
<%= f.text_field :author %>
with
<select class="flexselect">
<option value="1">George Washington</option>
<option value="2">John Adams</option>
<option value="3">Thomas Jefferson</option>
<option value="4">Bill Gates</option>
<option value="5">Nicolas Sarkozy</option>
<option value="6">Gordon Brown</option>
<option value="7">Angela Merkel</option>
<option value="8">Moritz Leuenberger</option>
<option value="9">Barrack Obama</option>
</select>
This will give you
for the select box andfor the flexselect box
7. Add the following to application.js in the public/javascripts folder
// Jquery : flexselect plugin
jQuery(document).ready(function() {
$("select[class*=flexselect]").flexselect();
});
8. Create the database and execute the migration
rake db:create:all
rake db:migrate
9. Launch the server
ruby script/server
When you edit a post, you should see a textbox instead of the select box. If you type inside, you will see immediately the available options in a list below.
This ends up this tutorial on the implementation of jquery flexselect with ruby on rails. Note that the tutorial was simplified compared to a real world implementation (ex. jquery is loaded from google repository and direclty in the view / flexselect is not yielded by the chosen model but is in the general view and so on).
You can find flexselect here.
