zoukankan      html  css  js  c++  java
  • 搜索引擎的提示效果完整的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";
        }
    
  • 相关阅读:
    Django之搭建学员管理系统
    数据库查询操作(fetchone,fetchall)
    HTTP 方法:GET与 POST
    初识django框架
    Memcached的批量删除方案总结
    centos5.5 下面 lnmp环境遇到的小问题
    CentOS 5.5 --学习(1)
    HTTP请求方法及响应码详解(http get post head)
    codeigniter注意点
    htaccess 伪静态的规则
  • 原文地址:https://www.cnblogs.com/liuchang/p/3320312.html
Copyright © 2011-2022 走看看