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
www.prototype-ui.com/current/test/functional/auto_complete/test_auto_complete.html

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 1.6.0.1 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 versions.now 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
end
end

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.

index.html.erb

<h1>Prototype UI autocomplete Demo</h1>

<label><b>User</b></label>
<p>
<%= text_field 'user','id'%>
</p>
<script type="text/javascript">

document.whenReady(function()
{
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")});
ac.setAutocompleteList(<%=@users%>);

});
</script>

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