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 Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
HTML Dropdown box
- Thread starter mousematt
- Start date
dwarfthrower
Programmer
If you have a HTML select box, then it should already act as you describe:
eg:
If you place the cursor in the drop down list and hit the 'G' key it will take you to the 'goanna' entry.
Sing out if I'm completely off the track.
eg:
Code:
<select name="select">
<option>aardvark</option>
<option>butterfly</option>
<option>cockatoo</option>
<option>dingo</option>
<option>elephant</option>
<option>fish</option>
<option>goanna</option>
<option>hippopotomus</option>
</select>If you place the cursor in the drop down list and hit the 'G' key it will take you to the 'goanna' entry.
Sing out if I'm completely off the track.
That does work well. Unfortunately it doesn't mimic all of the functionality the OP suggests -- in many MS apps you can start typing and it will not only jump to the first letter match but will continue to refine the scrolling based on further letters. For instance, if the list had 50 items that started with the letter G but you were looking for "guppies" you could type "G" and it would jump to the G section, followed by "U" and it would jump to the first GU item in the menu, etc. In standard HTML it would jump to the G section when you typed "G", then the U section when you typed "U".
In IE you can type "GGGGGGG" to have it move through the G items one at a time, but it's not as nice, especially if the list is long.
Unfortunately the only way I know to simulate it on a web page would be either through some nifty Javascript (which definitely could be done, though it would take a fair bit of clever code), or it could be done through a (gasp!) ActiveX control (and then only work on Windows machines), a Java applet (with the slow and unpleasant load that entails), or through Flash.
In IE you can type "GGGGGGG" to have it move through the G items one at a time, but it's not as nice, especially if the list is long.
Unfortunately the only way I know to simulate it on a web page would be either through some nifty Javascript (which definitely could be done, though it would take a fair bit of clever code), or it could be done through a (gasp!) ActiveX control (and then only work on Windows machines), a Java applet (with the slow and unpleasant load that entails), or through Flash.
I know it could be done in Javascript but I'm just wondering if it is worth the trouble... 
We have to remember than different browsers react differently and their behavior might be something users enjoy. Any attempts to change the browser behavior (especially ones that take time and ressources) shouldn't be taken too lightly.
Gary Haran
==========================
We have to remember than different browsers react differently and their behavior might be something users enjoy. Any attempts to change the browser behavior (especially ones that take time and ressources) shouldn't be taken too lightly.
Gary Haran
==========================
dwarfthrower
Programmer
No trouble really...
All you need is a variable to hold the characters you've been typing and you can just loop through the options looking for a match.
Here's a rough sketch:
All you need is a variable to hold the characters you've been typing and you can just loop through the options looking for a match.
Here's a rough sketch:
Code:
<html>
<head>
<script>
// String variable to hold the letters typed
var lettercache = new String();
// Variable to pass timeouts around on
var ID;
// Clears the letters typed
function clearCache(){
lettercache = new String();
}
//ensures the letters are reset on load
function doOnLoad(){
ID = window.setTimeout('clearCache();' , 2000);
}
//handles keypresses, checks to see if there is a match in the list
function doOnKeyPress(){
window.clearTimeout(ID);
s=window.event.keyCode;
lettercache = lettercache + String.fromCharCode(s);
var obj = document.all.select1;
var selIndx = 0;
for(i = 0; i < obj.options.length; i++) {
str1 = obj.options[i].text.slice(0, lettercache.length);
str2 = lettercache;
if(str1.toUpperCase() == str2.toUpperCase()){
selIndx = i;
break;
}
}
obj.selectedIndex = selIndx;
ID = window.setTimeout('clearCache();' , 2000);
}
</script>
</head>
<body onLoad="doOnLoad()" onKeyPress="doOnKeyPress()">
<form name="form1" method="post" action="">
<select name="select1">
<option>aardvark</option>
<option>abba</option>
<option>accent</option>
<option>access</option>
<option>accessed</option>
<option>adventure</option>
<option>aeroplane</option>
<option>afternoon</option>
<option>afterwards</option>
</select>
</form>
</body>
</html>- Status
Similar threads
- Locked
- Question
- Locked
- Question