Subscribe Rss:


Wednesday, July 9, 2008

Prototype UI autocomplete Using Ruby on Rails -Part I

This article is similar to

Proto!TextboxList + Autocomplete

The main source for this article is from

Get the original source Prototype UIAutoComplete

The above mentioned source is just an example.Inorder to make ur application integrated with Proto!TextboxList + Autocomplete.First you have the js files prototype.js & prototype-ui.js.If u are going to get it from please check the versions.since i have used Prototype JavaScript framework, version or else u can get it from the above downloadable link.

In ur rails application include the two js files & stylesheets(auto_complete & mac_os_x)

After creating ur rails project,try to create a scaffold named user

ruby script/generate scaffold user name:string

now you want to show the names to be displayed in the textbox using prototype autocomplete.While creating the rails application itself you will be having the prototype script.but check the include the js prototype-ui & the stylesheets.

Create a controller named list

ruby script/generate controller list

now in ur list controller

List Controller

class ListController < ApplicationController
layout 'users'
def index
@users=User.find(:all,:select=>"id as value,name as text").to_json

We have to use json since to convert a Ruby object into a JSON string.

In the controller file i have selected id as value & name as text,since in this format only we want to retrieve the datas.

Format given in the source file

ac.setAutocompleteList([{text:"Sébastien", value:1},
{text:"Samuel", value:2},
{text:"Vincent", value:3},
{text:"Tobie", value:4},
{text:"Christophe", value:5},
{text:"Lo", value:6},
{text:"Cloé", value:7},
{text:"Inès", value:8},
{text:"Warrior", value:9}

Now a create a index.html.erb file.


<h1>Prototype UI autocomplete Demo</h1>

<%= text_field 'user','id'%>
<script type="text/javascript">

ac = new UI.AutoComplete('user_id',{ shadow: "auto_complete"});
ac.observe('input:empty', function(event) {event.memo.autocomplete.showMessage("Type a user name")})
.observe('selection:empty', function(event) {event.memo.autocomplete.showMessage("Nothing found")});


Now in your layout at the head portion just include the js files and stylesheets

<%= javascript_include_tag :defaults%>
<%= javascript_include_tag 'prototype-ui'%>
<%= stylesheet_link_tag 'mac_os_x'%>
<%= stylesheet_link_tag 'auto_complete'%>

Now you have integrated ur rails application with Prototype UI autocomplete.
Autocomplete works by caching all the results from a JSON Request and feeding them to the autocompleter object.

Kind notice this application has been created &
tested in rails 2.0.2


  1. Hi, thanks for a nice demo.
    Presently i am using prototype-ui autocomplete in my project.
    I had tried "Proto!TextboxList + Autocomplete Demo" too and find that it has case-insensitive feature too.
    Is there a way by which i could have case-insensitive feature in "prototype-ui autocomplete" ?

  2. Hey man, thanks for the demo, just a question very important to me, how do i recover the ids of the selected item on the other side of the submit? Thanks man.

  3. hi ,i have just on question

    where i put the two files of prototype

    thx a lot :)

  4. Hi, thanks for a nice demo.
    Presently i am using prototype-ui autocomplete in my project.
    Even i need two diffrent color within this prototype-ui autocomplete field how to do..?please do the needful.