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.
Technology Partners: 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Email validation in proper way is  very important validation required in any web pages. This code is self explainable except that Regular Expression which I used for pattern matching. I originally published as a thread on my website : http://www…
Checking the Alert Log in AWS RDS Oracle can be a pain through their user interface.  I made a script to download the Alert Log, look for errors, and email me the trace files.  In this article I'll describe what I did and share my script.
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…
Six Sigma Control Plans

777 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