下拉框可输入+自动提示+支持键盘事件兼容IE,FF
<script language="javascript" src="jquery-1.4.1.js"></script>
<script>
$(document).ready(function() {
var cus = 0;
var classname = "";
var arry = new Array();
var $autocomplete = $("<ul class='autocomplete'></ul>").hide().insertAfter("#box4");
$("#hoho").find("option").each(function(i, n) {
arry[i] = $(this).text()
});
$("#box4").keyup(function(event) {
if ((event.keyCode != 38) && (event.keyCode != 40) && (event.keyCode != 13)) {
$autocomplete.empty();
var $SerTxt = $("#box4").val().toLowerCase();
if ($SerTxt != "" && $SerTxt != null) {
for (var k = 0; k < arry.length; k++) {
if (arry[k].toLowerCase().indexOf($SerTxt) >= 0) {
$("<li title=" + arry[k] + " + $(".autocomplete li").eq(cus).text()+"</font>");
$autocomplete.hide();
}
}).blur(function() {
setTimeout(function() {
$autocomplete.hide()
},
3000)
})
});
function setValue(index) {
var ddl = document.getElementById("hoho");
var Value = ddl.options[index].text;
document.getElementById("box4").value = Value
$("#HTML").html("你选择的是<font color='red'>" +Value+"</font>");
}
</script>
<style>
.hoho{width:197;height:20px!important; height:17px;margin-left:-180px!important; margin-left:-179px}
.sp{margin-left:179px;width:18px;overflow:hidden; }
.bo4{width:178px;position:absolute;left:0px!important;height:20px!important;top:0.5px!important; left:1px; top:0px; height:20px}
.autocomplete{list-style-type:none; margin:0px; padding:0px; border:#008080 1px solid }
.autocomplete li{font-size:12px; font-family:"Lucida Console", Monaco, monospace; font-weight:bold; cursor:pointer; height:20px; line-height:20px}
.hovers{ background-color:#3368c4; color:fff}
</style>
<BODY>
<table width="440" border="0" align="center">
<tr>
<td><div style="position:relative;">
<span name="hoho" onChange="setValue(this.selectedIndex)" >
<option> ===请选择===</option>
<option value='1' >校长test1</option>
<option value='2' >校长JQsdfuer</option>
<option value='3' >校长3asdfJasdfQuer</option>
<option value='4' >校长testJQue2r</option>
<option value='5' >校长JQuery</option>
</select>
</span>
<input name="box4" id="box4" value="===请选择===" >
</div>
</td>
<td id="HTML" width="350">输入A试试</td>
</tr>
</table>
</BODY>
