This is my IInd article on Prototype UI autocomplete.The main source of the article is from
Prototype-UI.
Download this tutorial
In my previous article the autocomplete is a normal one.but now it has been integrated with ajax.The major changes in this artilce is we can add name in the textbox list.In the first article i have shown the names are populating from database,but now it has been integrated with add functionality.
Major Changes
I have included auto_complete.js & drop_shadow stylesheets
Step 1.changes in Layout
In the head part of the layout include the new js files & stylesheets.
<%= javascript_include_tag :defaults%>
<%= javascript_include_tag 'auto_complete'%>
<%= stylesheet_link_tag 'default'%>
<%= stylesheet_link_tag 'drop_shadow'%>
Step 2.Changes in the erb file
<div>
<label><b>User</b></label>
<p>
<%= text_field 'user','id'%>
</p>
<script type="text/javascript">
Event.observe(window, "load", function() {
pui = new UI.AutoComplete('user_id', { infoMessage: "Type a user name",
noMatchMessage: "Nothing found",
shadow: "auto_complete",
});
pui.setAutocompleteList(<%=@users%>);
});
</script>
</div>
<div style="margin-top:50px;">
<label><b>Add a new box</b></label>
<p>
<%= text_field 'name','id' %>
<%=link_to 'Add' ,{},:onclick=>"add()",:href=>'#'%>
</p>
</div>
Add functionality was integrated in the erb file.here onclick event has been called for adding a new user or text
Step 3.Javascript in head tag
<script type="text/javascript">
function add()
{
if($F('name_id').length > 0)
{
pui.add($F('name_id'));
}
}
</script>
Now we can add the text into the textbox list.
Thanks!
Download this tutorial
Recently i received a comment from Amin which he mentioned he entry.text is undefined & this.selectedList = this.list....}).slice(0, this.options.max.selection);
error occuring in his application.
So if u switch ur project from rails 2.0.2 to other higer versions.Just make
12 comments: