【下拉框可输入+自动提示+支持键盘事件兼容IE,FF】

最新推荐文章于 2025-07-07 14:30:04 发布

原创最新推荐文章于 2025-07-07 14:30:04 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的下拉框与输入框联动功能，当用户开始在输入框中输入字符时，会自动显示与输入字符相匹配的选项列表，同时支持键盘上下键导航和回车键确认选择。

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