This is what i copied from the thread:
like to enquire for your search box and the dropdown list. If i am to search by typing in 'C' into the textbook , it will list out the whole range . Currently if the user clicks on the list the combo box will still remain and it will not become a dropdown list. What do i need to change for your code to enable me to become a dropdown list again once i selected my value from the list in the combo box.
Thanks
<html>
<head>
<title>untitled</title>
<style type="text/css">
form {
margin: 0px;
}
input {
font: 200 11px "comic sans ms";
color: #ffffff;
border: 1px solid #a0e0e0;
background: #000000;
}
select {
font: 200 11px "comic sans ms";
color: #ffffff;
background: #248080;
}
#box {
position: absolute;
width: 140px;
border-width: 4px;
border-color: #248080;
border-style: outset inset inset outset;
}
#placeholder {
position: relative;
width: 136px;
height: 53px;
text-align: left;
}
body {
text-align: center;
margin-top: 10%;
background: #333f40;
}
</style>
<script type="text/javascript" language="javascript">
function setSelect(e, field, s) {
if (typeof setSelect.fieldLength == 'undefined') setSelect.fieldLength = field.value.length;
if (field.value.length<setSelect.fieldLength) {
setSelect.fieldLength = 0;
field.value = '';
return false;
}
var val = field.value.toLowerCase();
var opt = 1, firstone, howmany = 0;
while (s.options[opt] && s.options[opt].value.substring(0,val.length).toLowerCase() != val)
++opt;
firstone = opt;
while (s.options[opt] && s.options[opt++].value.substring(0,val.length).toLowerCase() == val)
++howmany;
if (!howmany) {
alert('That entry does not exist.');
field.value = field.value.substring(0, field.value.length - 1);
field.focus();
return false;
}
s.size = 1;
s.selectedIndex = firstone;
s.size = howmany;
if (howmany == 1) {
field.value = s.options[s.selectedIndex].value;
field.style.color = '#ffff00';
setSelect.fieldLength = field.value.length;
return false;
}
else field.style.color = '#ffffff';
return false;
}
function fillit(str) {
var el = document.forms[0].country;
el.value = str;
el.style.color = '#ffff00';
return false;
}
onload = function() {
document.forms[0].reset();
document.forms[1].reset();
document.forms[0].country.select();
}
</script>
</head>
<body>
<div id="placeholder">
<div id="box">
<form>
<input name="country" type="text" value="Enter Country" style="width:136px;text-align:center;"
onkeyup="if(this.value)setSelect(event,this,f1.countries)">
</form>
<form name="f1">
<select name="countries" size="1" onchange="fillit(this[this.selectedIndex].value)">
<option value="">|||||||||||||||||||||||||||</option>
<option value="Albania">Albania</option>
<option value="Andorra">Andorra</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="China">China</option>
<option value="England">England</option>
<option value="Eritrea">Eritrea</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="Gambia">Gambia</option>
<option value="Germany">Germany</option>
<option value="Greece">Greece</option>
<option value="Namibia">Namibia</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Nigeria">Nigeria</option>
<option value="Norway">Norway</option>
<option value="Pakistan">Pakistan</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Spain">Spain</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Nigeria">Nigeria</option>
<option value="Uganda">Uganda</option>
<option value="United States">United States</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="Uruguay">Uruguay</option>
</select>
</div></div>
<br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br><br>
<input type="button" value="DONE"
onclick="alert(countries[countries.selectedIndex].value)">
</form>
</body>
</html>