Using jquery flexselect (a predictive select control) in your rails views

This tutorial will show how to use Jquery flexselect with rails. It is the first part of a series of tutorials on rails UI showing how to enhance the basic rails view in an unobstrusive way.

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

                 George Washington
                 John Adams
                  Thomas Jefferson
                  Bill Gates
                  Nicolas Sarkozy
                  Gordon Brown
                  Angela Merkel
                  Moritz Leuenberger
                  Barrack Obama
            

for the select box and 


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