Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

online glossary using JavaScript



6:27 pm on Jul 2, 2003 (gmt 0)

10+ Year Member

i need a glossary style program to be used as a searchable german-english dictionary.

currently i am using the following javascript, but it has some flaws...

<style type="text/css"><!--
.vcblist {
background-color: #0000ff;
color: #33CCFF;
font-family: arial;
<!-- Begin
function SelObj(formname,selname,textname,str) {
this.formname = formname;
this.selname = selname;
this.textname = textname;
this.select_str = str '';
this.selectArr = new Array();
this.initialize = initialize;
this.bldInitial = bldInitial;
this.bldUpdate = bldUpdate;

function initialize() {
if (this.select_str =='') {
for(var i=0;i<document.forms[this.formname][this.selname].options.length;i++) {
this.selectArr[i] = document.forms[this.formname][this.selname].options[i];
this.select_str += document.forms[this.formname][this.selname].options[i].value+":"+
else {
var tempArr = this.select_str.split(',');
for(var i=0;i<tempArr.length;i++) {
var prop = tempArr[i].split(':');
this.selectArr[i] = new Option(prop[1],prop[0]);
function bldInitial() {
for(var i=0;i<this.selectArr.length;i++)
document.forms[this.formname][this.selname].options[i] = this.selectArr[i];
document.forms[this.formname][this.selname].options.length = this.selectArr.length;

function bldUpdate() {
var str = document.forms[this.formname][this.textname].value.replace('^\\s*','');
if(str == '') {this.bldInitial();return;}
var j = 0;
pattern1 = new RegExp("^"+str,"i"[smilestopper]);
for(var i=0;i<this.selectArr.length;i++)
document.forms[this.formname][this.selname].options[j++] = this.selectArr[i];
document.forms[this.formname][this.selname].options.length = j;
document.forms[this.formname][this.selname].options[0].selected = true;
//document.forms[this.formname][this.textname].value = document.forms[this.formname][this.selname].options[0].text;
function setUp() {
obj1 = new SelObj('menuform','itemlist','entry');
// menuform is the name of the form you use
// itemlist is the name of the select pulldown menu you use
// entry is the name of text box you use for typing in

function handleEnter (field, event) {
var keyCode = event.keyCode? event.keyCode : event.which? event.which : event.charCode;
if (keyCode == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
i = (i + 1) % field.form.elements.length;
return false;
return true;

// End -->

<BODY OnLoad="javascript:setUp();document.menuform.entry.focus()" bgcolor="#0000ff" text="#33CCFF" link="#33CCFF" alink="#33CCFF" vlink="#33CCFF">

<form name="menuform">
<h2><font color="#00FFFF" face="arial, helvetica"><strong>English to German dictionary</strong></font></h2>
<p><font face="arial, helvetica" size="-1">Please enter the first few letters
of the word you are looking for.</font> <br>
Search term:
<input type="text" name="entry" size="30" onKeyUp="javascript:[smilestopper]obj1.bldUpdate();" class="vcblist" onkeypress="return handleEnter(this, event)">
<select name="itemlist" class="vcblist" size=5 onchange=document.menuform.word.value=document.menuform.itemlist[document.menuform.itemlist.selectedIndex].value onkeypress="return handleEnter(this, event)">
<option value="ein(e)">a</option>
<option value="k&ouml;nnen">able: to be able to</option>
<option value="gegen">about</option>
<option value="weiterkommen">advance, to</option>
<option value="der Vorteil,-e">advantage</option>
<!-- there are hundreds of words but this gets the point across --> </select>
<textarea name="word" cols="30" rows="4" class="vcblist" onkeypress="return handleEnter(this, event)"></textarea>
<p>*Seperable prefix</p>
<!-- END SCRIPT -->

the script uses a very interesting way of searching the vocab list but sometimes returns incorrect results.

i would GREATLY appreciate if anyone would either debug this script or provide an alternative

Thank you


6:31 pm on Jul 2, 2003 (gmt 0)

WebmasterWorld Administrator jatar_k is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Have you narrowed down why the incorrect results are returned?

Is there any similarity in the occurence of incorrect results?

Is it always certain searches?

What methods have you tried to isolate the occurrence of the bad results?


6:55 pm on Jul 2, 2003 (gmt 0)

10+ Year Member

ok...heres the deal
this is the full list of choices (a's only)
<!-- begin list -->
<option value="ein(e)">a</option>
<option value="k&ouml;nnen">able: to be able to</option>
<option value="gegen">about</option>
<option value="weiterkommen">advance, to</option>
<option value="der Vorteil,-e">advantage</option>
<option value="nach">after</option>
<option value="der Nachmittag,-e">afternoon</option>
<option value="wieder">again</option>
<option value="gegen">against</option>
<option value="Abgemacht!">agreed!</option>
<option value="das Flugzeug,-e">airplane</option>
<option value="der Wecker,-">alarm clock</option>
<option value="alle">all</option>
<option value="das Taschengeld">allowance</option>
<option value="die Alpen">Alps</option>
<option value="schon">already</option>
<option value="auch">also</option>
<option value="immer">always</option>
<option value="Amerika">America</option>
<option value="ein(e)">an</option>
<option value="und">and</option>
<option value="die Antwort,-en">answer</option>
<option value="die Wohnung,-en">apartment</option>
<option value="der Apfel,-&uml;">apple</option>
<option value="der Apfelsaft">apple juice</option>
<option value="ungef&auml;hr">approximately</option>
<option value="der April">April</option>
<option value="der arm,-e">arm</option>
<option value="der Sessel,-">armchair</option>
<option value="um">around</option>
<option value="ankommen*">arrive, to</option>
<option value="wie">as</option>
<option value="gemischt">assorted</option>
<option value="bei">at</option>
<option value="sportlich">athletic</option>
<option value="der August">August</option>
<option value="die Tante,-n">aunt</option>
<option value="&Ouml;sterreich">Austria</option>
<option value="der &Ouml;sterreicher,-">Austrian</option>
<option value="der Herbst">autumn</option>
<option value="frei">available</option>
<option value="entfernt">away</option>

<!-- end list -->

when you search a term such as this one

<option value="der arm,-e">arm</option>
<option value="der Nachmittag,-e">afternoon</option>

the value is often returned as one "-e" rather than "der arm, -e"

it aslo seems to have problems with refreshing the page and the use of the enter key to submit the form... i solved the later by adding a bit that uses the enter key to just switch fields but i have been unable to discover why everything else is happening


9:38 am on Jul 3, 2003 (gmt 0)

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

I wonder if it's the comma (,) and dash (-) in your values. I'm not sure what the standard here is, but I'd have a look to see if these values are allowed...

Featured Threads

Hot Threads This Week

Hot Threads This Month