input 联想下拉php,jquery实现select下拉框可输入+联想关联option

$(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