<script type="text/javascript">
//<![CDATA[
function cbUpdate()
{
var opt;
var sel = document.info.cbShow;
sel.style["display"] = "block";
sel.length = 0;
opt = document.createElement( "option" );
opt.setAttribute("value", "0");
optTxt = document.createTextNode(document.info.cbSelected.value);
opt.appendChild(optTxt);
sel.appendChild(opt);
for(i = 0; i < document.info.cbHold.length; i++)//or use ajax
{
if ((document.info.cbHold[i].text).indexOf(document.info.cbSelected.value) != -1)
{
opt = document.createElement( "option" );
opt.setAttribute("value", document.info.cbHold.options[i].value);
optTxt = document.createTextNode(document.info.cbHold.options[i].text);
opt.appendChild(optTxt);
sel.appendChild(opt);
}
}
}
function cbSelect()
{
var sel = document.info.cbShow;
document.info.cbSelected.value = sel.options[sel.selectedIndex].text;
sel.style["display"] = "none";
}
//]]>
</script>
<div class="comboBox" style="width: 150px;">
<input type="text" name="cbSelected" id="cbSelected" style="width: 150px;"
onfocus="cbUpdate(this.id)" onkeyup="cbUpdate(this.id)"/><br/>
<select class="cbInput" name="cbShow" id="cbShow" size="5" style="width: 154px; position: absolute; display: none;"
onchange="cbSelect()" onfocus="cbUpdate()"></select>
<select class="cbInput" name="cbHold" id="cbHold" style="display:none;">
<option value="1">aa</option>
<option value="2">ab</option>
<option value="3">ac</option>
<option value="4">bc</option>
<option value="5">bd</option>
<option value="6">be</option>
<option value="7">ba</option>
<option value="8">cc</option>
<option value="9">cd</option>
<option value="10">ce</option>
<option value="11">ca</option>
</select>
</div>
thoughts? opinions?