Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Wanet Telecoms Ltd on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

ddl complete as typing

Status
Not open for further replies.

kaijanm

Programmer
May 14, 2003
102
US
Hello. Thanks in advance for any help you can provide.

In an ASP.NET application, I have a drop down list of Employers. I would like the user to be able to start typing into it and have it go to the spot in the list based on what they are spelling out, not just the first letter.

The default behavior seems to do the following. Say you're looking for 'Albuquerque Computers'. The user starts typing 'Albuquerque' and what happens is the 'A' brings them to the first 'A' item in the list, but then the 'l' brings them to the first 'L' item in the list rather than the first 'Al' item.

Any ideas how to have this bring up the first 'Al' word rather than change to L* words?

I was told that JavaScript is the answer to all my problems ( :D ), so I'm posting this here.

Thanks!
Kimberly
 
The quick-and-dirty would be to call a function on the text box's ONKEYUP event, cycle through the selectListName.options.text, checking for the first such value with .toUpperCase().indexOf(document.formName.textFieldName.value.toUpperCase()) == 0, then set selectListName.selectedIndex = i; break;

Follow?

This can get lengthy for lists that are really long.

Example:

Code:
<html>
<head>
<script>
function checkSelect()
{
 var textVal = document.formName.textField.value.toUpperCase(); //assumption we want to ignore case
 var dfso = document.formName.selectListName.options; //to reduce typing
 for(var i=0; i<dfso.length; i++)
 {
  if(dfso[i].text.toUpperCase().indexOf(textVal) == 0)
  {
   document.formName.selectListName.selectedIndex = i;
   return; //selection found.  Leave function.
  }
 }

 //if no match was found:
 document.formName.selectListName.selectedIndex = -1;
}
</script>
</head>
<body>
<form name='formName'>
<input type='text' name='textField' size='30' onkeyup='checkSelect();' /><br />
<select name='selectListName'>
<option>Groucho</option>
<option>grumpy</option>
<option>harlequin</option>
<option>Harpo</option>
<option>chasing the ladies</option>
<option>Chico</option>
<option>Zeppo</option>
<option>zippity zounds</option>
<option>gum shoe</option>
<option>Gummo</option>
</select>
</form>
</body>
</html>

'hope this helps.

--Dave
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top