$(document).ready(function() {
var cus = 0;
var classname = "";
var arry = new Array();
var $autocomplete = $("
$("#hoho").find("option").each(function(i, n) {
arry[i] = $(this).text()
});
$("#box4").focus(function(){if ($("#box4").val() == "===请选择==="){$("#box4").val(""); }});
$("#box4").blur(function(){if ($("#box4").val() == ""){$("#box4").val("===请选择==="); }});
$("#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) {
$("
").text(arry[k]).appendTo($autocomplete).mouseover(function() {$(".autocomplete li").removeClass("hovers");
$(this).css({
background: "#3368c4",
color: "#fff"
})
}).mouseout(function() {
$(this).css({
background: "#fff",
color: "#000"
})
}).click(function() {
$("#box4").val($(this).text());
$autocomplete.hide()
})
}
}
}
$autocomplete.show()
}
var listsize = $(".autocomplete li").size();
$(".autocomplete li").eq(0).addClass("hovers");
if (event.keyCode == 38) {
if (cus < 1) {
cus = listsize - 1;
$(".autocomplete li").removeClass();
$(".autocomplete li").eq(cus).addClass("hovers");
var text = $(".autocomplete li").eq(cus).text();
$("#box4").val(text)
} else {
cus--;
$(".autocomplete li").removeClass();
$(".autocomplete li").eq(cus).addClass("hovers");
var text = $(".autocomplete li").eq(cus).text();
$("#box4").val(text)
}
}
if (event.keyCode == 40) {
if (cus < (listsize - 1)) {
cus++;
$(".autocomplete li").removeClass();
$(".autocomplete li").eq(cus).addClass("hovers");
var text = $(".autocomplete li").eq(cus).text();
$("#box4").val(text)
} else {
cus = 0;
$(".autocomplete li").removeClass();
$(".autocomplete li").eq(cus).addClass("hovers");
var text = $(".autocomplete li").eq(cus).text();
$("#box4").val(text)
}
}
if (event.keyCode == 13) {
$(".autocomplete li").removeClass();
$("#HTML").html("你选择的是" + $(".autocomplete li").eq(cus).text()+"");
$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("你选择的是" +Value+"");
}
.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}
===请选择=== Java EE Java SE Java ME Net PHP Ajax JQuer 校长1123123 校长JQsdfuer 校长3asdfJasdfQuer 校长a23sdfsaJQuer 校长J232Quer | 输入A试试 |
原文:http://www.cnblogs.com/huige-you/p/3984310.html