Perl And CGI - Drop Down List - Automatic Selection As You Type

I'm designing a Web-Page - form using Perl and the CGI module.

The page contains a drop-down list.

When the user is viewing the page, and the user's focus is on the drop-down list, and they type one character, the drop-down list jumps to the first occurance of that letter.

i.e. if the drop-down list contains these items, [ace, boy, ache, care] - when the user hits the 'a' key, the list jumps to 'ace'. (Right?)

But unlike many forms, if they then hit the 'c' key after hitting the 'a' (the user is intending to jump to 'ace') it jumps to 'care.'

I trust I've explained this well enough - (sometimes it's tough)

My question is: Is there a way, using Perl / CGI, to get that 'type-ahead' result for the drop-down lists?

Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

no, that is a browser issue. even with javascript i doubt you'll get this working. But never with perl/cgi.
remember, cgi runs on the server, and only generates a (possibly dynamic) html document. That is, a bunch of plain text.
The browser that receives this html document decides how to render it.
Hi billfinkri,

You probably remembered incorrectly because the vast majority of web forms behave exactly the way you described.  Very few, if any, would care to provide the functionality you want.

For what you want, you have to use javascript to intercept keystrokes and check if it's the dropdown list that received it, then depending on the time elapsed from last keystroke you either provide a jump to new item or match more character to the current selected item.  It's not a trivial issue.

I doubt if you could even do it with Javascript, however you could do it as a Java applet, but that's probably getting off track.
Bootstrap 4: Exploring New Features

Learn how to use and navigate the new features included in Bootstrap 4, the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.


You can do a version of this with javascript...
You can get a .js script from:

Here's a small sample of something I use:(only using some "a's and b's" in this example)

#Standard DBI initial variable calls
use vars qw($query,$dbhndl,$sql,$sth,@row);
use DBI;
#call to escape unescape funny characters
use CGI qw/escape unescape/;
use CGI qw/:standard/;

#there some DBI connection stuff and require files etc here####

$MASTER_SELECT_ALL = qq~<OPTION VALUE=1727>Aasen,Sample R.N.
<OPTION VALUE=3460>Alden,Sample R.N.
<OPTION VALUE=609>Allard,Sample E.M.D.
<OPTION VALUE=1787>Allen,Sample1 N.A.
<OPTION VALUE=3767>Allen,Sample2 M.D.
<OPTION VALUE=133>Allenstein,Sample R.N.
<OPTION VALUE=3809>Alwin,Sample N.A.
<OPTION VALUE=3482>Ameenuddin,Sample M.D.
<OPTION VALUE=264>Amos,Sample Ms.
<OPTION VALUE=3791>Anavekar,Sample M.D.
<OPTION VALUE=1405>Anderson,Sample1 R.N.
<OPTION VALUE=152>Anderson,Sample2 R.N.
<OPTION VALUE=933>Anderson,Sample3 Mr.
<OPTION VALUE=3780>Anderson,Sample4 R.N.
<OPTION VALUE=245>Anger,Sample E.M.D.
<OPTION VALUE=311>Askelin,Sample R.N.
<OPTION VALUE=1>Asleson,Sample Ms.
<OPTION VALUE=3757>Babuin,Sample M.D.
<OPTION VALUE=3683>Bacon,Sample N.A.
<OPTION VALUE=167>Baerga-Varela,Sample M.D.
<OPTION VALUE=1691>Baez,Sample M.D.
<OPTION VALUE=247>Baker,Sample E.M.D.~;

$query = new CGI;

#send MIME and HTML headers
print $query->header("-nph=>1");
print $query->start_html(-title => 'INSERT');
print"<SCRIPT LANGUAGE=\"JavaScript\" SRC=\"/javascript/filterlist.js\"></SCRIPT>";

print <<HTML;
<!--begin master page table -->
<FORM name="webform" METHOD=Post ENCTYPE=multipart/form-data>
<SCRIPT type=text/javascript>
var myfilter = new filterlist(document.webform.ED_ID);

<P >Filter: <A href="javascript:myfilter.reset()"
title="Clear the filter">Clear</A> <A href="javascript:myfilter.set('^A')"
title="Show items starting with A">A</A> <A href="javascript:myfilter.set('^B')"
title="Show items starting with B">B</A> <A href="javascript:myfilter.set('^C')"
title="Show items starting with C">C</A> <A href="javascript:myfilter.set('^D')"
title="Show items starting with D">D</A> <A href="javascript:myfilter.set('^E')"
title="Show items starting with E">E</A> <A href="javascript:myfilter.set('^F')"
title="Show items starting with F">F</A> <A href="javascript:myfilter.set('^G')"
title="Show items starting with G">G</A> <A href="javascript:myfilter.set('^H')"
title="Show items starting with H">H</A> <A href="javascript:myfilter.set('^I')"
title="Show items starting with I">I</A> <A href="javascript:myfilter.set('^J')"
title="Show items starting with J">J</A> <A href="javascript:myfilter.set('^K')"
title="Show items starting with K">K</A> <A href="javascript:myfilter.set('^L')"
title="Show items starting with L">L</A> <A href="javascript:myfilter.set('^M')"
title="Show items starting with M">M</A> <A href="javascript:myfilter.set('^N')"
title="Show items starting with N">N</A> <A href="javascript:myfilter.set('^O')"
title="Show items starting with O">O</A> <A href="javascript:myfilter.set('^P')"
title="Show items starting with P">P</A> <A href="javascript:myfilter.set('^Q')"
title="Show items starting with Q">Q</A> <A href="javascript:myfilter.set('^R')"
title="Show items starting with R">R</A> <A href="javascript:myfilter.set('^S')"
title="Show items starting with S">S</A> <A href="javascript:myfilter.set('^T')"
title="Show items starting with T">T</A> <A href="javascript:myfilter.set('^U')"
title="Show items starting with U">U</A> <A href="javascript:myfilter.set('^V')"
title="Show items starting with V">V</A> <A href="javascript:myfilter.set('^W')"
title="Show items starting with W">W</A> <A href="javascript:myfilter.set('^X')"
title="Show items starting with X">X</A> <A href="javascript:myfilter.set('^Y')"
title="Show items starting with Y">Y</A> <A href="javascript:myfilter.set('^Z')"
title="Show items starting with Z">Z</A>
<P>Filter by regular expression:<BR><INPUT name=regexp
onkeyup=myfilter.set(this.value)> <INPUT onclick=myfilter.set(this.form.regexp.value) type=button value=Filter> <INPUT onclick="myfilter.reset();this.form.regexp.value=''" type=button value=Clear>
<BR><INPUT name=toLowerCase onclick=myfilter.set_ignore_case(!this.checked)
type=checkbox> Case-sensitive


<!-- end master page table -->




print $query->end_html;

Hope this helps


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Well, there you go.  Something useful to store away in the Javascript bag of tricks.
windfall, nice script.  But I doubt OP would want it though.  For one thing, this is way different a display than a drop down box, and the filtering code need improvement to get rid of the letters that has no value after filtering.  For another important thing, it's not the "type-ahead" effect OP wanted.

I was thinking more along the way of having JS capturing key events on page, and use the which method to identify if it's the dropdown list receiving key.  Then the time of the keyboard event will be compared to that of the last event to determine if this event should be considered to start a new filtering or a further filtering of the earlier event (hence the "type-ahead") effect.  Then regex would be used to filter.  This is all very tedious and tricky issue is the time comparison.  That's why I don't think OP's question could be solved easily, but JS should be able to do it.
Hi, billfinkri,

I found we're all wrong about drop down menu's capability to "type-ahead".  In fact, you were right and indeed drop down menus should have this type of "type-ahead" capability.  But the catch is, you need to type the 2nd character quite quickly, otherwise the 2nd typed character would be considered the starting character for a new selection instead of further filtering current selection.  I have tested and it in fact works just fine for "type-ahead".  In fact, it worked exactly the same way as a manually produced popup menu.  Here's the script that works as I tested:

use strict;
use CGI qw/:standard/;

print header,
      start_html('test script');
print start_form,
                 -values=>[qw/ab ac ad ba bc bd ca cb cd da db dc/]),br,
print end_html;

Nothing really special.  You just need to type the 2nd character fast.  That's it.  The above script has the same effect of a test html doc I made:

function populate()
  var a = ['a', 'b', 'c', 'd'];
  for(var i = 0; i < 4; i++)
    for(var j = 0; j < 4; j++)
      document.form1.test.options[i*4+j] = new Option(a[i] + a[j], a[i] + a[j]);
<body onload=populate()>
<form name=form1>
<select name="test">

These both work the way you wanted.

Are you sure this is not a browser dependent thing?  Have you tried your "quick" typing behaviour with different browsers?
tintin: good point! I only tried with firefox, and both worked fine.  But I just tried with IE and it didn't work!  Well, no wonder I thought such type-ahead doesn't work before since I never checked it after I switched to firefox.

For type-ahead in IE, I guess really need to use JS then.
gee, I was just about to finish a javascript that make IE work exactly like Firefox.  I think it's a really tough one to make although the behavior is already implemented.  But since you already awarded points, I guess I'll just leave it at this then.  Tintin, I do want to note that using JS I was able to do it perfectly for IE as well.
billfinkri, if you see this post of mine:

Thanks for the positive feedback!  If you're still interested in my solution (I spent hours on it (mostly for an optimization that backfired :( ) and am proud to say that it works for IE and is even better than firefox dropdown menu!), please send an email to my address {{email address removed by jmcg}} (there's a good reason why I don't want to post here, but rest assured you'll get the script for free).
Hi, jmcg, thanks for the editing.  Actually I was not aware of these rules (or maybe I forgot).  I have to admit that I was thinking it might be a bit problematic not directly posting solution in thread, but I have a good reason for doing that, even though the solution's free for all.  Thought it might be OK since I'm not trying to get points for my solution.

Nonetheless your points are well taken & sorry about it!
Thanks jmcg!  Since the question's already PAQ-ed & a solution was provided by another expert, I was not really using email to "resolve" a problem any more.  Not sure if this argument's convincing at all, but ...
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Fonts Typography

From novice to tech pro — start learning today.