Hello!
This ist the source-code for an editable combobox implemented with
HTML,CSS and Javascript.
I have tested it with IE and Mozilla. But I don't know, if it will
work in other browsers (Opera, Konqueror, etc.) So I need your
feedback...
Regards
Oliver
--- SNIP ---
<html>
<head>
<style type="text/css">
<!--
div.cbhide {
position:absolute;
visibility:hidden;
overflow:hidden;
height:0px;
}
div.cbshow {
position:absolute;
visibility:visible;
overflow:visible;
}
table.combo {
width:100%;
border: 1px solid #000000;
}
#cbtext {
background-color:#FFFF99;
}
#cbbtn{
border-color:#FFFFFF;
border-width:2px;
border-style:outset;
cursor:pointer;
background-color:#CCCCCC;
text-align:center
vertical-align:middle;
margin:0px;
padding:0px;
height:100%;
}
td.passive {
color:#000000;
background-color:#FFFF99;
}
td.active {
color:#FFFFFF;
background-color:#0000FF;
}
-->
</style>
<script type="text/javascript">
<!--
function mousedown(obj) {
var select = document.getElementById('cbselect');
var temp = obj.target;
while(temp != null && temp != select) {
temp = temp.parentNode;
}
if(temp == select) {
obj.target.handleEvent(obj);
} else {
hide();
}
}
function hide() {
document.getElementById('cbselect').className='cbh ide';
document.getElementById('cbbtn').onclick=show;
document.onmousedown = null;
return true;
}
function show() {
var node = document.getElementById('cbtext');
var x = Number(node.offsetLeft) + Number(document.body.leftMargin);
var y = Number(node.offsetTop) + Number(node.offsetHeight) +
Number(document.body.topMargin);
var w = Number(node.offsetWidth)
var div = document.getElementById('cbselect');
div.className='cbshow';
div.style.top = y;
div.style.left = x;
div.style.width = w;
document.getElementById('cbbtn').onclick=hide;
if(document.addEventListener) {
document.onmousedown = mousedown;
} else {
document.getElementById('cbbtn').onblur=hide;
}
}
function select(td) {
td.className='passive'
var text = td.firstChild.nodeValue;
document.getElementById('cbtext').value = text;
hide();
}
//-->
</script>
</head>
<body>
<table class="comboinput" cellspacing="0" cellpadding="0">
<tr class="comboinput">
<td class="comboinput"><input id="cbtext" type="text"
name="test"></td>
<td class="comboinput">
<button id="cbbtn" type="button"
onmousedown = "this.style.borderStyle='inset'"
onmouseup = "this.style.borderStyle='outset'"
onmouseout = "this.style.borderStyle='outset'"
onclick="show()">
<img src="open.gif">
</button>
</td>
<!-- <td class="comboinput">
<button type="button" onclick="alert('Click')">Click</button>
</td> -->
</tr>
</table>
<div id="cbselect" class="cbhide">
<table class="combo" cellspacing="0" cellpadding="0" >
<tr class="option">
<td class="passive" onMouseover="this.className='active';"
onMouseout="this.className='passive';" onClick="select(this)"
onFocus="select(this)">Apple</td>
</tr>
<tr class="option">
<td class="passive" onMouseover="this.className='active';"
onMouseout="this.className='passive';" onClick="select(this)"
onFocus="select(this)">Cherry</td>
</tr>
<tr class="option">
<td class="passive" onMouseover="this.className='active';"
onMouseout="this.className='passive';" onClick="select(this)"
onFocus="select(this)">Melon</td>
</tr>
<tr class="option">
<td class="passive" onMouseover="this.className='active';"
onMouseout="this.className='passive';" onClick="select(this)"
onFocus="select(this)">Lemon</td>
</tr>
<tr class="option">
<td class="passive" onMouseover="this.className='active';"
onMouseout="this.className='passive';" onClick="select(this)"
onFocus="select(this)">Peach</td>
</tr>
<tr class="option">
<td nowrap class="passive" onMouseover="this.className='active';"
onMouseout="this.className='passive';" onClick="select(this)"
onFocus="select(this)">Plum</td>
</tr>
</table>
</div>
</body>
</html>
