I don't think so... that talks about using AJAX and a predefined "dictionary" list of terms... but not selecting the proper item in a <select> element...
To my knowledge, you'd still have to do the following:
1.) Make sure the <select> item has focus
2.) Listen for keystrokes within a certain time-span (like 2 seconds)
2-A) If within 2 seconds, append that keystroke to the current set
2-😎 If not, reset the current set and start with this keystroke
3) Search the drop-down for a match according to the keystroke
Hmm... sounds like a neat side-project... maybe I'll try this....
EDIT
Threw this together.... kinda works... has some kinks but I'm not JS genius...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="title" content="" />
<meta name="author" content="" />
<meta name="subject" content="" />
<meta name="language" content="en" />
<meta name="keywords" content="" />
<script language="JavaScript" type="text/javascript">
var search=null;
var ie = null;
var gk = null;
var elmnt = null;
var time = null;
function addEvent(obj, evType, fn, useCapture)
{
if (obj.addEventListener)
{
obj.addEventListener(evType, fn, useCapture);
return true;
}
else if (obj.attachEvent)
{
var r = obj.attachEvent("on"+evType, fn);
return r;
}
else
alert("Handler could not be attached");
}
function findIt(e)
{
if(document.layers)
var key = String.fromCharCode(e.which).toLowerCase();
else
var key = String.fromCharCode(e.keyCode).toLowerCase();
runSearch(key);
}
function runSearch(letter)
{
if(search==null)
{
search = letter;
}
else
{
if(time != null)
{
var tc = doTime();
if( ((tc-time) <= 3) && ((time-tc) >= 0) )
search = search + letter;
else
search = letter;
}
else
{
search = letter;
}
}
time = doTime();
var haystack = elmnt.options;
document.getElementById('searching').innerHTML = search;
for(var i=0; i<haystack.length; i++)
{
var item = haystack[i].innerHTML;
if(item.match('^'+search+'.') != null)
{
elmnt.options.selectedIndex=i;
break;
}
}
}
function doTime ()
{
var now = new Date();
var mins = now.getMinutes();
var min = mins*60;
var secs = now.getSeconds();
var ts = min + secs;
return ts;
}
window.onload = function ()
{
elmnt = document.testForm.aptNum2;
addEvent(elmnt, 'keydown', findIt);
}
</script>
</head>
<body>
<form name="testForm">
<select name="aptNum2" id="aptNum">
<option></option>
<option>000</option>
<option>1000</option><option>1001</option><option>1003</option><option>1005</option>
<option>1101</option><option>1102</option><option>1103</option><option>1104</option>
<option>1105</option><option>1106</option><option>1107</option><option>1108</option>
<option>1109</option><option>1110</option><option>1111</option><option>1112</option>
<option>1113</option><option>1114</option><option>1115</option><option>1116</option>
<option>1117</option><option>1118</option><option>1201</option><option>1202</option>
<option>1203</option><option>1204</option><option>1205</option><option>1206</option>
<option>1207</option><option>1208</option><option>1209</option><option>1210</option>
<option>1211</option><option>1212</option><option>1213</option><option>1214</option>
<option>1215</option><option>1216</option><option>1217</option><option>1218</option>
<option>1301</option><option>1302</option><option>1303</option><option>1304</option>
<option>1305</option><option>1306</option><option>1307</option><option>1308</option>
<option>1309</option><option>1310</option><option>1311</option><option>1312</option>
<option>1313</option><option>1314</option><option>1315</option><option>1316</option>
<option>1317</option><option>1318</option><option>1409</option><option>1410</option>
<option>1411</option><option>1412</option><option>1413</option><option>1414</option>
<option>1415</option><option>1416</option><option>1417</option><option>1418</option>
<option>1517</option><option>2000</option><option>2001</option><option>2002</option>
<option>2003</option><option>2101</option><option>2102</option><option>2103</option>
<option>2105</option><option>2106</option><option>2107</option><option>2108</option>
<option>2109</option><option>2110</option><option>2111</option><option>2112</option>
<option>2113</option><option>2114</option><option>2201</option><option>2202</option>
<option>2203</option><option>2204</option><option>2205</option><option>2206</option>
<option>2207</option><option>2208</option><option>2209</option><option>2210</option>
<option>2211</option><option>2212</option><option>2213</option><option>2214</option>
<option>2301</option><option>2302</option><option>2303</option><option>2304</option>
<option>2305</option><option>2306</option><option>2307</option><option>2308</option>
<option>2309</option><option>2310</option><option>2311</option><option>2312</option>
<option>2313</option><option>2314</option><option>2405</option><option>2406</option>
<option>2407</option><option>2408</option><option>2409</option><option>2410</option>
<option>2411</option><option>2412</option><option>2413</option><option>2414</option>
<option>2512</option><option>3000</option><option>3016</option><option>3017</option>
<option>3115</option><option>3116</option><option>3117</option><option>3119</option>
<option>3120</option><option>3121</option><option>3122</option><option>3123</option>
<option>3124</option><option>3125</option><option>3215</option><option>3216</option>
<option>3217</option><option>3218</option><option>3219</option><option>3220</option>
<option>3221</option><option>3222</option><option>3223</option><option>3224</option>
<option>3225</option><option>3315</option><option>3316</option><option>3317</option>
<option>3318</option><option>3319</option><option>3320</option><option>3321</option>
<option>3322</option><option>3323</option><option>3324</option><option>3325</option>
<option>3419</option><option>3420</option><option>3421</option><option>3422</option>
<option>3423</option><option>3424</option><option>3425</option>
</select>
</form>
<hr><h3>Searching:</h3>
<div id="searching">
</div>
</body>
</html>
