Solved

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

Posted on 2004-10-05
15
1,257 Views
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?

Thanks.
0
Comment
Question by:billfinkri
15 Comments
 
LVL 18

Expert Comment

by:kandura
Comment Utility
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.
0
 
LVL 8

Expert Comment

by:inq123
Comment Utility
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.

Cheers!
0
 
LVL 48

Expert Comment

by:Tintin
Comment Utility
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.
0
 
LVL 2

Accepted Solution

by:
windfall earned 250 total points
Comment Utility
Hello-

You can do a version of this with javascript...
You can get a .js script from:
http://javascript.internet.com/forms/filterlist.html

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

############
#c:\perl\bin\perl
#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;
<CENTER>
<!--begin master page table -->
<TABLE WIDTH="700" BORDER="0" CELLSPACING="0" CELLPADDING="2" >
<TR>
<TD>
<FONT COLOR="#000000">SELECT NAME TO UPDATE MASTER STAFF INFO:
<FORM name="webform" ACTION=UPDATE_FORM.pl METHOD=Post ENCTYPE=multipart/form-data>
<SELECT NAME=ED_ID size=5>
$MASTER_SELECT_ALL
</SELECT>
<SCRIPT type=text/javascript>
<!--
var myfilter = new filterlist(document.webform.ED_ID);
//-->
</SCRIPT>

<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
<br>
<INPUT NAME=Submit TYPE=submit VALUE="UPDATE ED STAFF DB">
</FORM>
</TD>

</TR>
</TABLE>

<!-- end master page table -->

</TD></TR></TABLE>

</CENTER>

HTML

print $query->end_html;

##############
Hope this helps
windfall

0
 
LVL 48

Expert Comment

by:Tintin
Comment Utility
Well, there you go.  Something useful to store away in the Javascript bag of tricks.
0
 
LVL 8

Expert Comment

by:inq123
Comment Utility
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.
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 8

Expert Comment

by:inq123
Comment Utility
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:

#!/usr/bin/perl
use strict;
use CGI qw/:standard/;

print header,
      start_html('test script');
print start_form,
      popup_menu(-name=>'test',
                 -values=>[qw/ab ac ad ba bc bd ca cb cd da db dc/]),br,
      end_form,
      hr;
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:

<html>
<script>
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]);
    }
  }
}
</script>
<body onload=populate()>
<form name=form1>
<select name="test">
</select>
</form>
</body>
</html>

These both work the way you wanted.
0
 
LVL 48

Expert Comment

by:Tintin
Comment Utility
inq123,

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

Expert Comment

by:inq123
Comment Utility
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.
0
 
LVL 8

Expert Comment

by:inq123
Comment Utility
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.
0
 
LVL 8

Expert Comment

by:inq123
Comment Utility
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).
0
 
LVL 8

Expert Comment

by:inq123
Comment Utility
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!
0
 
LVL 8

Expert Comment

by:inq123
Comment Utility
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 ...
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

I have been pestered over the years to produce and distribute regular data extracts, and often the request have explicitly requested the data be emailed as an Excel attachement; specifically Excel, as it appears: CSV files confuse (no Red or Green h…
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now