类百度，输入联想功能实现

Posted 2020-08-17 洋洋知道

1.定义一个文本框：

<input type="text" class="txtW95" id="produ" />
<div id="searchresult" style="display: none;position:absolute;top:22px;left:0;width: 250px;
z-index:9999;overflow: hidden;background: #E0E0E0;"border-top: none;> </div>

2.在文本框下面设置一个显示区域。样式设置为默认不显示，位置绝对，z-index设置大些位于前端

3.填充数据

$(function () {
            $("#produ").keyup(function (evt) {
                var k = window.event ? evt.keyCode : evt.which;
                if ($("#produ").val() != "" && k != 38 && k != 40 && k != 13) {
                    var name = $("#produ").val();
                    callBizAPI("AutoComplish", {//调用ajax
                        name: name
                    }, function (result) {//得到数据
                        var names = new Array();
                        if (result.length != 0) {
                            var layer = "";//定义一个层（这个层是一个表格）
                            layer = "<table id=‘aa‘>";
                            $.each(result, function (idx, item) {
                                layer += "<tr class=‘line‘><td class=‘std‘>" + item.ProductName + "</td></tr>";//向表格中添加数据
                            });
                            layer += "</table>";
                            $("#searchresult").empty();//先清空上次的结果
                            $("#searchresult").append(layer);//添加这个层
                            $(".line:first").addClass("hover");
                            $("#searchresult").css("display", "");
                            $(".line").hover(function () {
                                $(".line").removeClass("hover");
                                $(this).addClass("hover");
                            }, function () {
                                $(this).removeClass("hover");
                            });
                            $(".line").click(function () {//选中行后的处理
                                $("#produ").val($(this).text());
                                $("#searchresult").css("display", "none");
                            });
                        } else {
                            $("#searchresult").empty();
                            $("#searchresult").css("display", "none");
                        }
                    })
                } else if (k == 38) {//上箭头
                    $(‘#aa tr.hover‘).prev().addClass("hover");
                    $(‘#aa tr.hover‘).next().removeClass("hover");
                    $(‘#produ‘).val($(‘#aa tr.hover‘).text());
                } else if (k == 40) {//下箭头
                    $(‘#aa tr.hover‘).next().addClass("hover");
                    $(‘#aa tr.hover‘).prev().removeClass("hover");
                    $(‘#produ‘).val($(‘#aa tr.hover‘).text());
                }
                else if (k == 13) {//回车
                    $(‘#produ‘).val($(‘#aa tr.hover‘).text());
                    $("#searchresult").empty();
                    $("#searchresult").css("display", "none");
                }
                else {
                    $("#searchresult").empty();
                    $("#searchresult").css("display", "none");
                }
            });
            $("#searchresult").bind("mouseleave", function () {
                $("#searchresult").empty();
                $("#searchresult").css("display", "none");
            });
        })

　　要用的css

.line
        {
            font-size: 12px;
            background: #E0E0E0;
            width: 130px;
            padding: 2px;
        }
        .hover
        {
            background: #007ab8;
            width: 130px;
            color: #fff;
        }
        .std
        {
            width: 150px;
        }
        .cc{
        position:relative;
        }