Mikel
[转载]【下拉框可输入+自动提示+支持键盘事件兼容IE,FF】 – 从小就很拽 – 博客园.
今天公司一同事跑过来问我说会不会做下拉框可以输入，并且要输入一个 字就就要提示，要匹配的数据是下拉框里面拥有的值，我说以前做过，他就要求我帮他做一下，反正也没事就做了下，本来也没什么事，但是他一句话我石化了，他 说下拉框只有固定的8到10个值，我心想那有必要做这种吗，用手选还快，还提示过球球啊。最终明白了，万恶的客户，既然写了就放到园子里做下记录，可能对 某些朋友有用，上图看下。
没做美化，自己随便写的，有那里写的不够给力的，请大神们多指点，小弟在此先谢了。
$(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] + " class=" + classname + "></li>").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("你选择的是<font color='red'>" + $(".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>");} |
.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} |
<table width="440" border="0" align="center"> <tr> <td><div style="position:relative;"> <span class="sp"> <select id="hoho" name="hoho" class="hoho" onChange="setValue(this.selectedIndex)" > <option> ===请选择===</option> <option value='0' >Java EE</option> <option value='1' >Java SE</option> <option value='2' >Java ME</option> <option value='3' >Net</option> <option value='4' >PHP</option> <option value='5' >Ajax</option> <option value='6' >JQuer</option> </select> </span> <input name="box4" id="box4" value="===请选择===" class="bo4" > </div> </td> <td id="HTML" width="350">输入A试试</td> </tr></table> |
