One of the most common issues when building web application is the need of a editable combobox - control that allow user to type in whatever they wanted as well as to pick from a pre-defined list. With a textbox, select control and some javascript, it is not too difficult to create a cross browser solution. Here is how I did it.
<html>
<script language="javascript">
function findPos(obj){
var curleft = curtop = 0;
if (obj.offsetParent){
curleft = obj.offsetLeft
curtop = obj.offsetTop
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
}
return [curleft,curtop];
}
function findObj(id){
try{
var obj=document.getElementById(id);
return obj
} catch (e) {return null;}
}
function showCategories(obj){
var offset = 5;
var pos = findPos(obj);
var list = findObj("lstCategories");
if (list!=null){
list.style.left = pos[0];
list.style.top = pos[1]+obj.clientHeight+offset;
list.style.width = obj.clientWidth+offset;
list.style.display = "";
}
}
function setValue(objId,value){
var obj=findObj(objId);
if (obj!=null) {
obj.value = value;
}
}
function onTxtKeyPress(event){
if ((event.keyCode==40) || (event.keyCode==38)){
var obj=findObj("lstCategories");
if (obj!=null){
obj.focus();
}
}
}
function onListKeyPress(obj,event){
switch (event.keyCode){
case 13:
setValue('txtSearch',obj.options[obj.selectedIndex].text);
obj.style.display='none';
break;
}
}
</script>
<body>
<table border="0" style="z-index:1;">
<tr>
<td><input type="text" id="txtSearch" name="txtSearch"
onclick="javascript:showCategories(this);"
onkeypress="javascript:onTxtKeyPress(event);" /></td>
</tr>
<tr>
<td><input type="text" id="txt1" name="txt1" /></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<select id="lstCategories" name="lstCategories" size="10"
onclick="javascript:this.style.display='none';setValue('txtSearch',this.options[this.selectedIndex].text);"
style="display:none;z-index:10;position:absolute;"
onkeypress="javascript:onListKeyPress(this,event);">
<option>Javascript</option>
<option>Editable</option>
<option>Combobox</option>
<option>Textbox</option>
<option>HTML</option>
<option>DHTML</option>
<option>c#</option>
<option>.NET</option>
</select>
</body>
</html>