I made this script that will insert a textbox and position it on top of the select box. It then clips the right side of the textbox and the left side of the select box so the down arrow looks like part of the text box. It works pretty well for Windows 2000 on IE. I've never used this in real applications before because I'm guessing it would look pretty bad on Windows XP or Macs (since their textboxes are different). But maybe it'll help you.
<html>
<head>
<title>comboBox</title>
<script language="JavaScript">
// New Event! Add onNotInList="" to your select box to fire an event when the typed value is not an option of the drop-down.
var boxWidth = 200; // Width of the select boxes
var comboAll = false; // true = all select boxes; false = only select boxes with the attribute combo="combo"
var forceMatch = true; // true = typed value must exist in the drop-down on blur; false = any value accepted on blur.
var forceAutoMatch = false; // true = only allows values in the drop-down to be typed; false = any value accepted.
var f;
function initCbo(){
var output='';
for(var f=0;f<document.forms.length;f++){
var s=document.forms[f].elements;
for(var i=0;i<s.length;i++){
if(s
.type == 'select-one' && (s.combo=='combo' || comboAll==true)){
output='';
s.style.position='absolute';
s.style.width='100%';
s.style.zIndex='1';
s.style.clip='rect(auto,auto,auto,'+(boxWidth-20)+')';
s.onfocus="window.clearTimeout(window.tmr"+s.name+"
";
s.onchange='setTextBox(this,this.form)';
output+='<input type="text" name="'+s.name+'Box" size="20" style="position: absolute; width: '+(boxWidth-18)+'; z-index: 2;clip:rect(auto,'+(boxWidth-19)+',auto,auto)" onblur="checkInList(\''+s.name+'\',this.form)" ONKEYUP="autoComplete(this,this.form(\''+s.name+'\'),\'text\')" onNotInList="'+s.onNotInList+'">';
output='<span style="position:relative;width:'+boxWidth+'px;height:22px">'+s.outerHTML+output+'</span>';
s.outerHTML=output;
}
}
}
}
function checkInList(listName,f){
if(forceMatch){
var found=false;
var box=f[listName+"Box"];
var list=f[listName];
for(var i=0;i<list.length;i++){
if(box.value==list.text || box.value==''){
found=true;
break;
}
}
if(!found){
window.f=f;
eval("window.tmr"+listName+"=setTimeout(\"notInList('"+box.name+"')\",100)"
}
}
}
function notInList(box){
alert('The value you typed could not be found in the list!');
eval(f[box].onNotInList);
f[box].select();
f[box].focus();
}
function setTextBox(list,f){
var box = f[list.name+"Box"]
box.value=list[list.selectedIndex].text;
box.select();
box.focus();
}
function autoComplete (field, select, property) {
var found = false;
for (var i=0;i<select.options.length;i++) {
if(select.options[property].toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
found=true; break;
}
}
if (found) { select.selectedIndex = i; }
else { select.selectedIndex = -1; }
if (field.createTextRange) {
if (forceAutoMatch && !found) {
field.value=field.value.substring(0,field.value.length-1);
return;
}
var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;";
if (cursorKeys.indexOf(event.keyCode+";" == -1) {
var r1 = field.createTextRange();
var oldValue = r1.text;
var newValue = found ? select.options[property] : oldValue;
if (newValue != field.value) {
field.value = newValue;
var rNew = field.createTextRange();
rNew.moveStart('character', oldValue.length) ;
rNew.select();
}
}
}
}
window.onload=initCbo; // initalizes the script.
</script>
</head>
<body>
<form>
<table border=1>
<tr><td>label1</td>
<td><select name="test" combo="combo">
<option value="1">one
<option value="2">two
</select></td></tr>
<tr><td>label2</td>
<td><select name="test2">
<option value="1">one
<option value="2">two
</select></td></tr></table>
</form>
</body>
</html>
Adam
