Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


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

Posted on 2004-10-05
Medium Priority
Last Modified: 2013-12-03
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?

Question by:billfinkri
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
LVL 18

Expert Comment

ID: 12227815
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.

Expert Comment

ID: 12228961
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.

LVL 48

Expert Comment

ID: 12230458
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.
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Accepted Solution

windfall earned 1000 total points
ID: 12230519

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" ACTION=UPDATE_FORM.pl 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

LVL 48

Expert Comment

ID: 12230651
Well, there you go.  Something useful to store away in the Javascript bag of tricks.

Expert Comment

ID: 12231352
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.

Expert Comment

ID: 12233128
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 CGI.pm 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.
LVL 48

Expert Comment

ID: 12233198

Are you sure this is not a browser dependent thing?  Have you tried your "quick" typing behaviour with different browsers?

Expert Comment

ID: 12233655
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.

Expert Comment

ID: 12238102
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.

Expert Comment

ID: 12252316
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).

Expert Comment

ID: 12252697
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!

Expert Comment

ID: 12253341
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 ...

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A year or so back I was asked to have a play with MongoDB; within half an hour I had downloaded (http://www.mongodb.org/downloads),  installed and started the daemon, and had a console window open. After an hour or two of playing at the command …
In the distant past (last year) I hacked together a little toy that would allow a couple of Manager types to query, preview, and extract data from a number of MongoDB instances, to their tool of choice: Excel (http://dilbert.com/strips/comic/2007-08…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question