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

下面代码摘自http://www.oschina.net/question/96791_12832

$(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").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) {
                        $("<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>");
}
</script>
<style>
.hoho{197;height:20px!important; height:17px;margin-left:-180px!important; margin-left:-179px}
.sp{margin-left:179px;18px;overflow:hidden; }
.bo4{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 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>
                  <option value='6' >校长1123123</option>
                  <option value='6' >校长JQsdfuer</option>
                  <option value='6' >校长3asdfJasdfQuer</option>
                  <option value='6' >校长a23sdfsaJQuer</option>
                  <option value='6' >校长J232Quer</option>
             </select>

     </span>
     <input name="box4" id="box4" value="===请选择===" class="bo4" >
</div>
</td>
    <td id="HTML" width="350">输入A试试</td>
</tr>
</table>
</BODY>