|
|
| Databases 101 | | | ASP.NET Chapter | | | Suggest Article | | | Discussions | | | Bookstore | | | Write for Us | | | OpenAuction | | | Our Authors | |
|
|
|
 Internet Jobs
Affiliate Solutions
Manage Your E-Store
Buy BSD Products
Buy Network Products
Internet Intelligence
Document Management
Add Chat To My Site
Add Online Sales Reps
Accept Credit Cards
|
 |
|
| Make HTML Combo Boxes Behave Like VB Combo Boxes | | by Pete Nelson | | | Skill level: Beginner | | | First posted: Thursday, August 10, 2000 | |  | | | | Overview
One of the annonyances of HTML combo boxes (at least for me) is not having the ability to type in a few letters of a word and have it jump to that word. Instead, each letter typed in jumps to the first word with that letter. The following is some Javascript that will make your HTML combo boxes behave more like VB combo boxes. Note: because this was developed for an intranet project, we only made it work in Internet Explorer 5. Feel free to hack it up for Netscape.
How It Works
We use the onKeyDown event on the Select tag to capture the key that the user typed in, then we place that key in a "buffer", which would normally be a hidden input field. In the demonstration below, it's a standard input field so you can see what has been typed in. After storing the key, we loop through the values in the select box, compare the value of each item to the text typed in, and if the letters match, we set a global variable to the current selectedIndex value of the select box. We then use the onChange event to fire the function that selects the proper value. This is done so we can disable any matching functions when the user uses the mouse to select an item.
The Code
Here's a sample form using baseball teams for data.
<html>
<head>
<title>VB-Like Combo Box in HTML</title>
</head>
<body>
<script language="Javascript">
// This is a global value to determine which item to select
var selectedOption = 0;
var KeyPressEnabled = true;
function SelectChange()
{
// We use this function to disable any dynamic selecting of the
// combo-box when the user uses the mouse to select items.
if (KeyPressEnabled)
{
main.Drop1.selectedIndex = selectedOption;
}
}
function KeyPress()
{
KeyPressEnabled = true;
var Drop1 = main.Drop1;
// event.keyCode contains the ASCII value of the key pressed.
// Here, we display the value in an input box just for debugging.
// This is not necessary in your final version.
main.KeyPressed.value = event.keyCode;
// Keycode 38 and 40 are the up and down arrow buttons, in case the user
// uses the arrow keys to select items. We reset the value of what they
// have typed and change the global selected item value.
if (event.keyCode == 38)
{
main.Typed.value = "";
selectedOption = Drop1.selectedIndex - 1;
return;
}
if (event.keyCode == 40)
{
main.Typed.value = "";
selectedOption = Drop1.selectedIndex + 1;
return;
}
// Keycode 27 is escape, so the user can clear out what
// they have typed so far
if (event.keyCode == 27)
{
Drop1.selectedIndex = 0;
main.Typed.value = "";
return;
}
// Keycode 32 is a space
if (event.keyCode != 32)
{
// Only process the key if it's a letter or number
if (event.keyCode < 65 || event.keyCode > 90)
return;
}
// Convert the ASCII keycode value to a character and add the key
// entered to a "buffer". Normally, this would be a hidden field.
main.Typed.value += String.fromCharCode(event.keyCode).toLowerCase();
// Loop through the select list to find any matches
for (x = 0; x < main.Drop1.length; x++)
{
var OptionText = Drop1.options[x].text;
var tmpOptionText = "";
// Loop through the value of each select item, and if there is a
// match on what they have typed in, set the global variable for that value.
// The browser will run the onChange event since you typed a key. We'll
// run SelectChange() in the onChangeEvent just to be sure.
for (y = 0; y < OptionText.length; y ++)
{
tmpOptionText += OptionText.charAt(y).toLowerCase();
if (tmpOptionText == main.Typed.value)
{
Drop1.selectedIndex = x;
selectedOption = x;
return;
}
}
}
}
</script>
<form name="main">
Select this select box and type a few letters (hit Escape to clear):<br>
<select name="Drop1" onKeyDown="KeyPress();" onMouseDown="KeyPressEnabled = false;" onChange="SelectChange();">
<option>Anaheim Angels</option>
<option>Arizona Diamondbacks</option>
<option>Atlanta Braves</option>
<option>Baltimore Orioles</option>
<option>Boston Red Sox</option>
<option>Chicago Cubs</option>
<option>Chicago White Sox</option>
<option>Cincinnati Reds</option>
<option>Cleveland Indians</option>
<option>Colorado Rockies</option>
<option>Detroit Tigers</option>
<option>Florida Marlins</option>
<option>Houston Astros</option>
<option>Kansas City Royals</option>
<option>Los Angeles Dodgers</option>
<option>
Milwaukee Brewers</option>
<option>Minnesota Twins</option>
<option>Montreal Expos</option>
<option>New York Mets</option>
<option>New York Yankees</option>
<option>Oakland Athletics</option>
<option>Philadelphia Phillies</option>
<option>Pittsburgh Pirates</option>
<option>San Diego Padres</option>
<option>San Francisco Giants</option>
<option>Seattle Mariners</option>
<option>St. Louis Cardinals</option>
<option>Tampa Bay Devil Rays</option>
<option>Texas Rangers</option>
<option>Toronto Blue Jays</option>
</select>
<p>
Text typed so far:<br>
<input type="text" name="Typed" value="">
<p>
Last Keycode:<br>
<input type="text" name="KeyPressed" value="">
</form>
<script language="Javascript">
main.Typed.value = ""; // Clear out our "buffer"
</script>
</body>
</html>
|
Run the Sample
In the sample below, we provide both the standard combo box and the new "VB-Like" combo box. On the first box, try typing in "CO" to jump to the Colorado Rockies. Note how it jumps to the Chicago Cubs, then the Oakland Athletics. On the second combo box, it will correctly pick Colorado Rockies. Remember, this was only designed to work in IE5.
|
| | | | |
This document can be found in these Encyclopedia chapters:
º JavaScript
|
|
|
|
This is what people have been saying about this article:
Create a new discussion |
|
|
|
View Article Statistics
Authors...
Edit this article
View Preview Version
|
|
| Printable Copy of Article |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
|
|
