PDA

Click to See Complete Forum and Search --> : Invoking a default event handler

clkgtr
07-11-2003, 02:34 PM
I'm trying to create a searchable list box with an input box and a multiline select element similar to the one the guy here
http://forums.webdeveloper.com/showthread.php?threadid=12762
is trying to create. I don't want the user to have to click a process button though. So, I am using the onkeypress event to process my search. The problem is that my custom handler gets processed before the default handler and the captured key isn't appended to inputbox.value.

For example, if my list consists of:

cab
cat
cattle

and the user types 'catt' into the input box, 'cat' gets selected instead of 'cattle'. Is there a way to invoke the default handler and return control to my function?

If I have to, I can manually append the captured key to inputbox.value but I'd rather not. I'm not sure if all browsers process the onkeypress event in the same order.

Any help would be greatly appreciated.
Michael
Khalid Ali
07-11-2003, 11:26 PM
Post your html+javascrit code...
clkgtr
07-14-2003, 08:28 AM
<head>
<script language="JavaScript">
<!--
var currListItem = 0;

function searchList(eventObj)
{
var pressedKey;
if(window.event.keyCode) pressedKey = window.event.keyCode;
else if(eventObj.which) pressedKey = eventObj.which;

pressedKey = String.fromCharCode(pressedKey).toLowerCase();

var prevOption = list.children.item(currListItem);

for(var i=0; i < list.children.length; i++)
{
if(list.children[currListItem].childNodes[0].data.toLowerCase().indexOf(input.value+pressedKey /*I don't really want to add the captured key like I did here*/ ) == 0)
{
prevOption = false;
list.children[currListItem].selected = true;
break;
}
currListItem = (currListItem+1)%list.children.length;
}
}

function initVars(inputBoxName, selectName)
{
input = MM_findObj(inputBoxName);
list = MM_findObj(selectName);
}

//-->
</script>
</head>

<body onLoad=initVars('searchfield', 'list')">
<p>
<input type="text" name="searchfield" onfocus="input.value=''; input.onfocus=null;" onkeypress="searchList(event);" value="Enter company name here to search the list" size="55">
</p>
<p>

<select name="list" size="20">
<option>Aetna
USHealthcare</option>
<option>Beechstreet
PPO (Now Merged w/ Capp Care)</option>
<option>Blue Choice HMO</option>
<option>Blue
Choice Par Plan</option>
<option>Blue
Choice POS</option>
<option>Blue
Choice PPO</option>
<option>Blue
Cross/Blue Shield Federal Employees Program (POS)</option>
<option>Capp
Care or Beechstreet PPO</option>
<option>Choice
Care PPO</option>
<option>Cigna
HMO</option>
<option>Cigna
POS</option>
<option>Cigna
PPO</option>
<option>Community
Care Network (CCN)</option>
<option>Coventry
(Formerly Principal Healthcare)</option>
</select>&nbsp;</p>
</body>