homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

online glossary using JavaScript

10+ Year Member

Msg#: 470 posted 6:27 pm on Jul 2, 2003 (gmt 0)
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



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

Msg#: 470 posted 6:31 pm on Jul 2, 2003 (gmt 0)

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?


10+ Year Member

Msg#: 470 posted 6:55 pm on Jul 2, 2003 (gmt 0)
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


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

Msg#: 470 posted 9:38 am on Jul 3, 2003 (gmt 0)

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...

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved