take this as a draft:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Store</title>
<style type="text/css">
body{color:#000;background-color:#fff;font-family:'Bookman Old Style',Georgia,Verdana;font-size:14px;text-align:left;font-weight:bold;padding-top:250px;padding-left:500px;}
input[type=text]{text-align:center;font-style:italic;margin-left:20px;}
#err{display:inline;margin-left:20px;}
#thelist{display:block;width:100px;}
</style>
<script type="text/javascript">
/* creating random words and making options */
var abc=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
function doc(id){return document.getElementById(id);}
function makeOpts(){
var randoms=[];
for(var k=0;k<599;k++){
var str='';for(var i=0;i<5;i++){str+=abc[Math.floor(Math.random()*abc.length)];}
randoms.push(str);
}
randoms=randoms.sort();
for(var z=0;z<randoms.length;z++){
var o=document.createElement('option');
o.text=o.value=randoms[z];
doc('thelist').add(o,null);
}
}
function init(){
var mask=/[a-zA-Z]{1,}/g;
doc('usekw').onclick=function(){
doc('err').innerHTML='';
if(this.checked===true){doc('keyword').value='';doc('keyword').focus();}
else{doc('keyword').value='';doc('keyword').blur();}
}
doc('keyword').onkeyup=function(){
doc('err').innerHTML='';
var val=this.value;
if(doc('usekw').checked===false || !mask.test(val)){doc('thelist').selectedIndex=0;return;}
else{
var opts=doc('thelist').options,found=false;
for(var i=1;i<opts.length;i++){
var txt=opts[i].text.substring(0,val.length);
if(txt===val){doc('thelist').selectedIndex=i;found=true;break;}
else{continue;}
}
if(!found){doc('thelist').selectedIndex=0;doc('err').innerHTML='no matches found';}
}
}
makeOpts();
}
window.onload=init;
</script>
</head>
<body>
<input type="checkbox" id="usekw" /> use a keyword<input type="text" id="keyword" value="" /><div id="err"></div>
<select id="thelist"><option>My list</option></select>
</body>
</html>
