搜索引擎的提示效果完整的JavaScript代码

    function divShow() {
        <%--判断输入的是否为空
    如果为空则隐藏div
    如果不为空则显示div
    --%>

        if ($("#tbxSearchKeywords").val() == "") {
            document.getElementById("divshow").style.display = "none";
        } else {
            document.getElementById("divshow").style.display = "inherit";
            //编写Ajax的方法
            var name = $("#tbxSearchKeywords").val()
            $.ajax({
                //提交方式为Get
                type: "get",
                //访问的handler地址   参数d=" + new Date()是为了防止缓存是他每次访问的参数不同
                url: "../DivHanadler.ashx?d=" + new Date(),

                //设置提交的参数
                data: { name: name, seach: $("#ddlSearchType").val() },
                //提交的方式是json提交
                dataType: "json",
                //如果成功则得到返回的结果然后用javascript库中的each方法遍历返回的json集合
                success: function (data) {
                    var selectData = data.selectData;
                    var html = "";
                    //用each遍历json集合
                    $.each(selectData, function (i, dataitem) {
                        //alert(i);
                        var str = dataitem.item
                        html = html + "<div id='div" + i + "'  onmouseover='getBlue(this)'onmouseout='getWhite(this)' onclick='getHtml(this)'style='font-size:16px;padding-top:5px;padding-buttom:5px;'><span style='font-weight:bold'>" + str.substring(0, name.length) + "</span>" + str.substring(name.length, str.length) + "</div>";
                    });
                    $("#divshow").html(html);
                },
                //如果失败的话则弹出错误提醒
                error: function (data) {
                    document.getElementById("divshow").style.display = "none";
                }
            });
        }
    }
    //当鼠标点击时得到点解的文本内容
    function getHtml(obj) {
        document.getElementById("tbxSearchKeywords").value = obj.innerText;
    }
    //改变背景颜色的方法

    function getBlue(obj) {
        obj.style.backgroundColor = "#e8e3e3";
    }
    function getWhite(obj) {
        obj.style.backgroundColor = "white";
    }
    var i = 0;
    var num = 0;
    //当按上下键是改变背景颜色和文本内容
    function changeBack() {
        if (event.keyCode == 40) {
            document.getElementById("tbxSearchKeywords").onkeyup = function () { };
            if (i == 0) {
                document.getElementById("div0").style.backgroundColor = "#e8e3e3";
            } else if (i > 9) {
                document.getElementById("div0").style.backgroundColor = "#e8e3e3";
                document.getElementById("div9").style.backgroundColor = "white";
                i = 0;
            } else {
                document.getElementById("div" + (i - 1)).style.backgroundColor = "white";
                document.getElementById("div" + i).style.backgroundColor = "#e8e3e3";
            }
            num = 40;
            document.getElementById("tbxSearchKeywords").value = document.getElementById("div" + i).innerText;
            i++;
        } else if (event.keyCode == 38) {
            if (num == 40) {
                i--;
            }

            document.getElementById("tbxSearchKeywords").onkeyup = function () { };
            if (i == 0) {
                //document.getElementById("div0").style.backgroundColor = "#e8e3e3";
            } else if (i < 0) {
                document.getElementById("div9").style.backgroundColor = "#e8e3e3";
                document.getElementById("div0").style.backgroundColor = "white";
                i = 9;
            }
            else {
                document.getElementById("div" + (i - 1)).style.backgroundColor = "#e8e3e3";
                document.getElementById("div" + i).style.backgroundColor = "white";
            }
            if (i <= 0) {
                i = 10;
                document.getElementById("div0").style.backgroundColor = "white";
                document.getElementById("div" + (i - 1)).style.backgroundColor = "#e8e3e3";
            }
            document.getElementById("tbxSearchKeywords").value = document.getElementById("div" + (i - 1)).innerText;
            i--;
            num = 38;
        } else {
            if (event.keyCode == 13) {
                document.getElementById("divshow").style.display = "none";
                searchWithKeywords();
            } else {
                document.getElementById("tbxSearchKeywords").onkeyup = divShow;
            }
        }
    }
    //当点击页面其他地方时讲提示的DIV隐藏
    document.getElementsByTagName("body")[0].onclick = function () {
        document.getElementById("divshow").style.display = "none";
    }

 

转载于:https://www.cnblogs.com/liuchang/p/3320312.html