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

Posted 洋洋知道

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了类百度,输入联想功能实现相关的知识,希望对你有一定的参考价值。

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;
        }

  

以上是关于类百度,输入联想功能实现的主要内容,如果未能解决你的问题,请参考以下文章

input输入框实现联想关键词功能

input输入框联想功能

JavaScript实现搜索联想功能

如何使用AS3,实现百度模糊查询提示那样。

Vue移动端项目——搜索联想建议功能的实现(结合watch属性和使用lodash防抖节流)

Selenium2+python自动化34-获取百度输入联想词