
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
Hi,
ReplyDeleteThank you for your code.But When i add you code to my rail app it will show the error in firefox(Firebug)
entry.text is undefined
(?)()auto_com...203675916 (1706 行目)
findAll()prototyp...216204764 (655 行目)
(?)()prototyp...216204764 (594 行目)
each()prototyp...216204764 (593 行目)
findAll()prototyp...216204764 (654 行目)
displayCompletion()auto_com...203675916 (1706 行目)
keyup()auto_com...203675916 (1663 行目)
bind()prototyp...216204764 (208 行目)
wrapper()prototyp...216204764 (3883 行目)
[Break on this error] this.selectedList = this.list.fi...value)}).slice(0, this.options.maxItem);
I am using rails 2.2.2
Please help me.
AMin
Sorry Again me.
ReplyDeleteI have uploaded the my test project in this location
http://www.sendspace.com/file/b72cw8
Please have a look at it.
I am using mysql and rails 2.2.2
Thanks in advance
Amin.
Thanks for ur reply.i will check the issue
ReplyDeleteGen.lostwarrior ,
ReplyDeleteThank your for your reply. Your example works for me. But in my application I have test field as tag filed.
rails tag start
text_field_tag 'tag_list'
rails tag end
and in you app you have
rails tag start
text_field 'user','id'
rails tag end
How can I make it to work with acts_as_taggable_on_steroids plugin.
Please show me the way.
Thanks for your time.
Gen.lostwarrior ,
ReplyDeleteThank your for your reply. Your example works for me. But in my application I have test field as tag filed.
rails tag start
text_field_tag 'tag_list'
rails tag end
and in you app you have
rails tag start
text_field 'user','id'
rails tag end
How can I make it to work with acts_as_taggable_on_steroids plugin.
Please show me the way.
Thanks for your time.
If u need help just send ur application i will check it
ReplyDeleteHi Gen.lostwarrior,
ReplyDeleteHere is my application.
http://www.sendspace.com/file/ab8pkc
Today I have tried all the day but can not make the tag field auto compplete.
Please Please have a look on it.
hi Gen.lostwarrior,
ReplyDeleteSorry to write you again. Have you looked on my application? what do you think about it?
Please show me a way.
Regards.
Amin
i found a tutorial here. it works with me. May be helpful for u
ReplyDeletehttp://share-facts.blogspot.com/2009/02/ruby-on-rails-installation-in-ubuntu.html
Hi,
ReplyDeleteI'm using this tutorial and everything auto-completes, but the values are not being submitted when I submit the form. How are the values being accessed? to params are empty
How to do it without static list? I have 19k items to autocompleting, so i want to updating list on keyup.
ReplyDeleteThanks Gen.lostwarrior autocomplete is working but the problem is i am not getting the data based on the word that i enter.
ReplyDeleteex: in my database i am having name as abc , bob , cat
when i enter b i am not getting bob first, i am getting abc.
Please send me the solution to my mail id: praneetheee240@gmail.com