I have several RHTML input forms which have select drop-downs. My endusers
complain that some of the
drop-downs are a bit lengthy to go through, since they can only type in the
first character of the select option and still have to scroll through the
choices under that.
Looking around the Internet I found some sample Javascript code that will
allow type-ahead so that each subsequent character of the select option can
be typed in order to narrow down the options.
Below is a snippet of the Javascript that accomplishes this:
----------------------
<script> w = ""; function keyp(e, controlList)
{ if (document.layers) { k = e.which; }
else{ k = window.event.keyCode; }
if (k==46) { if (w.length!=0) { w = w.substring(0,w.length-1); } }
else{ w += String.fromCharCode(k).toLowerCase(); }
for (x=0; x<controlList.options.length; x++)
{ z = controlList.options[x].text.substring(0,w.length).toLowerCase();
if (w==z) { controlList.options[x].selected=true; break; } } }
</script>
----------------------
I call this function by including the following code in my RHTML page:
----------------------
<form action="/employee/login" method="post"
name="signIn">
Select the employee initials:<P>
<select NAME="employee[initials]" onkeydown="keyp(event,
controlList);
return false;">
...
<script>
var
controlList=document.forms[''signIn''].elements[''employee[initials]''];
</script>
----------------------
This works fine, but those RHTML input forms where I have a select drop-down
defined with a Rails variable as part of the name breaks things. For example
the code below doesn''t work:
----------------------
<form action="/employee/login" method="post"
name="signIn">
Select the employee initials:<P>
<select NAME="<%= @employee %>[initials]"
onkeydown="keyp(event,
controlList); return false;">
...
<script>
var
controlList=document.forms[''signIn''].elements[''<%=
@employee
%>[initials]''];
</script>
----------------------
Obviously the Javascript cannot parse what the Rails variable amounts to.
What would be a Ruby way of handling this to pitch the Javascript
altogether? Any suggestions?
> ---------------------- > <form action="/employee/login" method="post" name="signIn"> > Select the employee initials:<P> > <select NAME="<%= @employee %>[initials]" onkeydown="keyp(event, > controlList); return false;"> > ... > <script> > var controlList=document.forms[''si gnIn''].elements[''<%= @employee > %>[initials]'']; > </script> > ---------------------- > > > Obviously the Javascript cannot parse what the Rails variable > amounts to. > What would be a Ruby way of handling this to pitch the Javascript > altogether? Any suggestions?I would use the HTML ''id'' field in your "select" element. Rails automatically puts those in, without the square brackets, so that they can be accessed in javascript. For example: <%= text_field "object", "method" %> has as its output: <input type="text" id="object_method" name="object[method]" value=""> In your controlList assignment, use this instead: <script> var controlList = document.getElementById(''object_method''); </script> Duane Johnson (canadaduane) _______________________________________________ Rails mailing list Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails
I tried the id element, but the problem is that on some of these forms I
iterate through a list of select drop-down elements. Specifically they are
employee initials associated with specific purchase order line items. There
are up to 20 line items associated with each purchase order so each line
item would need its own unique id. So I need to somehow include a counter
variable in the id to get it to work. Otherwise just the first line item
works for the type-ahead function on the select drop-down.
Here is a sample:
<% 20.times do |num| %>
<tr>
...
<td><select NAME="lineitem<%= num+1
%>[txtintials]"><option
value="">--Pick--
<% @collectedEmployeeInitials.each do |employee| %>
<option value ="<%= employee %>"><%= employee %>
<% end %></select></td>
</tr>
<% end %>
See what I mean? The id would have to reflect the <%= num+1 %> value in
order to be unique and correspondent to that particular line item. I
don''t
do much Javascript so I will have to force the getElementbyId function to
use and iterated variable I suppose...
-----Original Message-----
From: Duane Johnson
[mailto:duane.johnson-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org]
Sent: Sunday, June 12, 2005 6:42 PM
To: rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
Subject: Re: [Rails] Select Form Customization
----------------------
<form action="/employee/login" method="post"
name="signIn">
Select the employee initials:<P>
<select NAME="<%= @employee %>[initials]"
onkeydown="keyp(event,
controlList); return false;">
...
<script>
var
controlList=document.forms[''si-gnIn''].elements[''<%=
@employee
%>[initials]''];
</script>
----------------------
Obviously the Javascript cannot parse what the Rails variable amounts to.
What would be a Ruby way of handling this to pitch the Javascript
altogether? Any suggestions?
I would use the HTML ''id'' field in your "select"
element. Rails
automatically puts those in, without the square brackets, so that they can
be accessed in javascript. For example:
<%= text_field "object", "method" %>
has as its output:
<input type="text" id="object_method"
name="object[method]" value="">
In your controlList assignment, use this instead:
<script>
var controlList = document.getElementById(''object_method'');
</script>
Duane Johnson
(canadaduane)
On Jun 13, 2005, at 6:40 AM, Kujawa, Greg wrote:> > <% 20.times do |num| %> > <tr> > ... > <td><select NAME="lineitem<%= num+1 %>[txtintials]"><option > value="">--Pick-- > <% @collectedEmployeeInitials.each do |employee| %> > <option value ="<%= employee %>"><%= employee %> > <% end %></select></td> > </tr> > <% end %> > > See what I mean? The id would have to reflect the <%= num+1 %> > value in > order to be unique and correspondent to that particular line item. > I don''t > do much Javascript so I will have to force the getElementbyId > function to > use and iterated variable I suppose... >I haven''t really looked through the javascript itself to see what it needs to do... but I think you''re on the right track. I would do the same thing in your case, if each drop-box needed a unique identifier. Also, in case it''s important, I noticed the "txtintials" you have there is missing an "i". Regards, Duane Johnson (canadaduane) _______________________________________________ Rails mailing list Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails
Good points. I am going through and indexing all of the elements and have
the first couple of them testing out okay. It will work but will be a real
PITA in terms of code length for something relatively simple. Oh well.
Should be completed soon.
As for the missing ''i'' this was something left over from the
original
database creator, who misspelled the column name on the backend so I have
the front end reflect this anomaly too to be consistent. Figure I should
just correct both sides sooner or later.
Thanks for the help!
-----Original Message-----
From: Duane Johnson
[mailto:duane.johnson-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org]
Sent: Monday, June 13, 2005 9:29 AM
To: rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
Subject: Re: [Rails] Select Form Customization
On Jun 13, 2005, at 6:40 AM, Kujawa, Greg wrote:
<% 20.times do |num| %>
<tr>
...
<td><select NAME="lineitem<%= num+1
%>[txtintials]"><option
value="">--Pick--
<% @collectedEmployeeInitials.each do |employee| %>
<option value ="<%= employee %>"><%= employee
%>
<% end %></select></td>
</tr>
<% end %>
See what I mean? The id would have to reflect the <%= num+1 %> value in
order to be unique and correspondent to that particular line item. I
don''t
do much Javascript so I will have to force the getElementbyId function to
use and iterated variable I suppose...
I haven''t really looked through the javascript itself to see what it
needs
to do... but I think you''re on the right track. I would do the same
thing
in your case, if each drop-box needed a unique identifier. Also, in case
it''s important, I noticed the "txtintials" you have there is
missing an "i".
Regards,
Duane Johnson
(canadaduane)