I am trying to allow customers to type a series of numbers and while doing so, the values in the dropdown corresponding with these values become highlighted. For example, I have a large drop down box with many numbers. I'd like the user to be able to enter "2345" for example, and if that entire value exists, it is highlighted. Currently, the box will select the first value beginning with 2, then the first value beginning with 3, etc (thus jumping around to various numbers). Instead, I'd like the entire user string to be found in the drop down. Everything I have tried thus far has been inconsistent. Can anyone point me in the right direction?
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 derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
highlight dropdown value based on user entry 4
- Thread starter Jami
- Start date
-
4
- #2
yes: use Mozilla - it has this behavior by default! ;-)
=========================================================
try { succeed(); } catch(E) { tryAgain(); }
-jeff
=========================================================
try { succeed(); } catch(E) { tryAgain(); }
-jeff
SashiRaveendran
Programmer
here's one i built a few months back for another project...
note that you must have your <option>s sorted alphabetically ascending for it to work most effectively. this is by design for efficiency, such that in a list of 10,000 options, if you search for "smit" then "smith", it doesn't have to search all previous options once it finds a partial match.
i currently use it on select elements with around 6000 options with no problems.
all you need to do is include this code in your project, and put attachSmartSelect() in window/body onload, like
window.onload = attachSmartSelect;
or
<body onload="attachSmartSelect();">
it should work for both IE and NS...Mozilla doesn't need it though it is still compatible.
=========================================================
try { succeed(); } catch(E) { tryAgain(); }
-jeff
note that you must have your <option>s sorted alphabetically ascending for it to work most effectively. this is by design for efficiency, such that in a list of 10,000 options, if you search for "smit" then "smith", it doesn't have to search all previous options once it finds a partial match.
i currently use it on select elements with around 6000 options with no problems.
all you need to do is include this code in your project, and put attachSmartSelect() in window/body onload, like
window.onload = attachSmartSelect;
or
<body onload="attachSmartSelect();">
it should work for both IE and NS...Mozilla doesn't need it though it is still compatible.
Code:
/************************************************
* SMART SELECT
* allows searching beyond first keystroke in <select> lists
* assumes the <option>s are sorted alphabetically
*
* implement with window.onload = attachSmartSelect;
*/
function selKeyPress(e) {
var ek = e ? e.which : event.keyCode;
// get char from keycode, add to cache
var key = String.fromCharCode(ek);
window.keyCache.push(key);
smartSelect(this);
// clear old timer, set new timer to expire the cache
window.clearTimeout(window.keyTimer);
window.keyTimer = window.setTimeout("resetKeyCache();", 3000);
return false;
}
function resetKeyCache(e) {
if (navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
e = event ? event : null;
var ek = e ? e.keyCode : null;
}
else {
if (e) {
ek = e.which;
}
}
if (!e || ek == 0 || ek == 46) {
// delete key pressed
window.keyCache.length = 0;
window.MX = null;
return false;
}
return false;
}
function smartSelect(el) {
// select the option most closely matching cache
// loop through cache
var oCache = window.keyCache;
mx = window.MX?window.MX:0;
cacheLoop:for (var cx = 0; cx < oCache.length; cx++) {
// get substring of cached chars to match
subCache = oCache.join("").substring(0, cx + 1);
// loop through options, starting at last match
optLoop:for (var ox = mx; ox < el.options.length; ox++) {
subTxt = el.options[ox].text.substring(0, cx + 1);
// quit if previous n - 1 chars don't match
if (subTxt.substring(0, cx - 1).toLowerCase() !=
subCache.substring(0, cx - 1).toLowerCase()) {
// remove last bad char from cache in case it was a miskey
oCache.pop();
break cacheLoop;
}
// see if cached chars == option chars
if (subCache.toLowerCase() == subTxt.toLowerCase()) {
// we have a match! store the index
mx = ox;
break optLoop;
}
}
}
// select the best match
el.selectedIndex = mx;
window.MX = mx;
}
function attachSmartSelect() {
// set up the keyCache
window.keyCache = [];
window.MX = 0;
// attach to all select lists
var f = document.forms;
for (var fx = 0; fx < f.length; fx++) {
var els = f[fx].elements;
for (var ex = 0; ex < els.length; ex++) {
if (els[ex].tagName.toLowerCase() == "select") {
els[ex].onkeypress = selKeyPress;
els[ex].onkeyup = resetKeyCache;
els[ex].onblur = resetKeyCache;
}
}
}
}
/*
*
**************************************************/=========================================================
try { succeed(); } catch(E) { tryAgain(); }
-jeff
- Thread starter
- #5
- Status
