How can I close the suggestion box when clicking outside

How can I close the suggestion box when clicking outside of the box?

I too hope that when I click the Clear button, the suggestion box will also closed too.

What code should I insert into my code? And where should I insert it?

This is my current code:

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

Thanks

Solution

This is the working code...

<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="closeBox()"/>

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