用户单击“清除”按钮时关闭建议框

时间:2013-12-20 06:16:22

标签: php search-engine

  1. 当用户点击“清除”按钮时,如何关闭提示框?

  2. 当建议框关闭时,搜索&清除按钮移动到原来的位置?

  3. 我应该插入什么代码才能执行此操作?

    运行此代码时可以看到按钮。

    这是我目前的代码:

    <html>
        <head>
            <title>
                Brandon's Search Engine
            </title>
            <style type="text/css">
                #suggestion {
                    border: 1px solid black;
                    visibility: hidden;
                    position: relative;
                    background-color: white;
                    z-index: 10;
                }
                #suggestion a {
                    font-size: 12pt;
                    color: black;
                    text-decoration: none;
                    display: block;
                    width: 648px;
                    height: auto;
                    text-align: left;
                    padding: 2px;
                }
                #suggestion a:hover {
                    background-color: #dddddd;
                    width: 644px;
                    padding: 2px;
                }
            </style>
            <script type="text/javascript">
    
                //document.getElementById("suggestion")
    
                function getSuggestion(q) {
                    var ajax;
                    if(window.XMLHttpRequest)//for ie7+, FF, Chrome
                        ajax = new XMLHttpRequest();//ajax object
                    else
                        ajax = new ActiveXObject("Microsoft.XMLHTTP");//for ie6 and previous
                    ajax.onreadystatechange = function() {
                        if(ajax.status === 200 && ajax.readyState === 4) {
                            //if result are not there then don't display them
                            if(ajax.responseText === "")
                                document.getElementById("suggestion").style.visibility = "hidden";
                            else {
                                document.getElementById("suggestion").style.visibility = "visible";
                                document.getElementById("suggestion").innerHTML = ajax.responseText;
                            }
                        }
                    };
                    ajax.open("GET", "suggestion.php?q=" + q, false);
                    ajax.send();
                }
            </script>
            <script>
                function validateForm()
                {
                var x=document.forms["q"]["q"].value;
                if (x==null || x=="")
                    {
                    return false;
                    }
                }
            </script>
        </head>
        <body>
            <form method="GET" action="search.php" name="q" onsubmit="return validateForm()">
                <table align="center">
                    <tr>
                        <td>
                            <h1><center>Brandon's Search Engine</center></h1>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <input type="text" name="q" style="height: 27px; width: 650px; padding: 2px"
                                   onkeyup="getSuggestion(this.value)" autocomplete="off" onblur="blur() document.getElementById('suggestion').style.visibility = 'hidden'"/>
    
                            <div id="suggestion" style="width: 648px">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <input type="submit" name="submit" value="Search" style="height: auto; width: 60px; padding: 2px" />
                            <input type="reset" value="Clear" style="height: auto; width: 50px; padding: 2px" />
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            To insert your site in result fill in the form at <a href="insert.php">here</a>.
                        </td>
                    </tr>
                </table>
                <input type="hidden" name="page" value="0" />
            </form>
        </body>
    </html>
    

    希望有人可以帮助我解决这个问题

    由于

1 个答案:

答案 0 :(得分:0)

<html>
<head>
    <title>
        Brandon's Search Engine
    </title>
    <style type="text/css">
        #suggestion {
            border: 1px solid black;
            visibility: hidden;
            position: relative;
            background-color: white;
            z-index: 10;
        }
        #suggestion a {
            font-size: 12pt;
            color: black;
            text-decoration: none;
            display: block;
            width: 648px;
            height: auto;
            text-align: left;
            padding: 2px;
        }
        #suggestion a:hover {
            background-color: #dddddd;
            width: 644px;
            padding: 2px;
        }
    </style>
    <script type="text/javascript">

        //document.getElementById("suggestion")

        function getSuggestion(q) {
            var ajax;
            if(window.XMLHttpRequest)//for ie7+, FF, Chrome
                ajax = new XMLHttpRequest();//ajax object
            else
                ajax = new ActiveXObject("Microsoft.XMLHTTP");//for ie6 and previous
            ajax.onreadystatechange = function() {
                if(ajax.status === 200 && ajax.readyState === 4) {
                    //if result are not there then don't display them
                    if(ajax.responseText === "")
                        document.getElementById("suggestion").style.visibility = "hidden";
                    else {
                        document.getElementById("suggestion").style.visibility = "visible";
                        document.getElementById("suggestion").innerHTML = ajax.responseText;
                    }
                }
            };
            ajax.open("GET", "suggestion.php?q=" + q, false);
            ajax.send();
        }
    </script>
    <script>
        function closeBox(){
            document.getElementById("suggestion").style.visibility = "hidden";
        }
        function validateForm()
        {
        var x=document.forms["q"]["q"].value;
        if (x==null || x=="")
            {
            return false;
            }
        }
    </script>
</head>
<body>
    <form method="GET" action="search.php" name="q" onsubmit="return validateForm()">
        <table align="center">
            <tr>
                <td>
                    <h1><center>Brandon's Search Engine</center></h1>
                </td>
            </tr>
            <tr>
                <td align="center">
                    <input type="text" name="q" style="height: 27px; width: 650px; padding: 2px"
                           onkeyup="getSuggestion(this.value)" autocomplete="off" onblur="blur() document.getElementById('suggestion').style.visibility = 'hidden'"/>

                    <div id="suggestion" style="width: 648px">
                    </div>
                </td>
            </tr>
            <tr>
                <td align="center">
                    <input type="submit" name="submit" value="Search" style="height: auto; width: 60px; padding: 2px" />
                    <input type="reset" onclick="closeBox()" value="Clear" style="height: auto; width: 50px; padding: 2px" />
                </td>
            </tr>
            <tr>
                <td align="center">
                    To insert your site in result fill in the form at <a href="insert.php">here</a>.
                </td>
            </tr>
        </table>
        <input type="hidden" name="page" value="0" />
    </form>
</body>