Clear results returned from jQuery, PHP, MySQL fields

Question

I have a search box that allows a member to enter part of a customer’s name and return results in the same way as a facebook dropdown. However, I come across several roadblocks:

• When a text field is cleared or a member clicks elsewhere on the screen, the returned results are also not cleared or placed on the page until the page is refreshed or exited. This is really very annoying.

JS Code:

<script type="text/javascript">
$(document).ready(function() {

    $("#searchbox").keyup(function() {
        var searchbox = $(this).val();
        var dataString = 'searchword=' + searchbox;

        if (searchbox.length < 3 ) {} else {
            $.ajax({
                type: "POST",
                url: "contact_search/search.php",
                data: dataString,
                cache: false,
                success: function(html) {

                    $("#display").html(html).show();
                }
            });
        }
        return false;
    });
});
</script>

HTML

<input type="text" id="searchbox" maxlength="20" />
<div id="display"></div>

Search.PHP script

<?php
    if($_POST)
    {
        $q=$_POST['searchword'];

            try {
                $db = new PDO('mysql:host=localhost;dbname=DB', 'USER', 'PW');
                $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
                $db->beginTransaction();

                $stmt = $db->prepare("SELECT FNAME, LNAME FROM table WHERE FNAME LIKE ? or LNAME LIKE ? ORDER BY ID LIMIT 5");


                $stmt->execute(array('%'.$q.'%', '%'.$q.'%'));

                $foundrows = $db->query("SELECT FOUND_ROWS()")->fetchColumn();

                $db->commit();
            }

            catch (PDOException $e)
            {
                echo "There was a system DB error. <br>".$e->getMessage();          
            }               

        if(isset($foundrows) && $foundrows == 0) {
            echo "<div class='display_box' align='left'>
                No matching results found</div>";
        } else {        

                while($row = $stmt->fetch()) {
                    $fname = $row['FNAME'];
                    $lname = $row['LNAME'];

                    $re_fname='<b>'.$q.'</b>';
                    $re_lname='<b>'.$q.'</b>';

                    $final_fname = str_ireplace($q, $re_fname, $fname);
                    $final_lname = str_ireplace($q, $re_lname, $lname);
    ?>
        <a href="123.php" target="mainFrame" style="text-decoration:none; color:#000;">
        <div class="display_box" align="left">

        <?php echo $final_fname; ?>&nbsp;<?php echo $final_lname; ?><br/>
        </div></a>

    <?php     
                }
        }
    }   
?>

Has anyone had this problem before? How can I remove the results from my php script if the field was empty or if a click appeared in any other area of ​​the screen (except for the returned results)?

Note:

4- (, , , ), . ( php-), " - ".

, php- https :

<?php
session_start();

if( $_SERVER['SERVER_PORT'] == 80) {
    header('Location:https://'.$_SERVER['HTTP_HOST'].$_SERVER["REQUEST_URI"]); 
    die();
} 

?>

Answer 1

click body . , :

window.frames['myframe'].document

, :

window.parent

. , , .

, .

J.

EDIT:

. div , . , : "mainFrame" "searchFrame", .

"mainFrame" :

$(document).click(function() {
    // second parameter sets the context for the selector
    $("#display", window.parent.frames['searchFrame'].document).hide(); 
})

'searchFrame':

$(document).click(function() {
    $("#display").hide(); 
})

Answer 2

, , :

$("body").click(function() {
    $("#display").hide();
});

, false, , body. , , event.preventDefault() .

, :

   if (searchbox.length < 3 ) {} else {

   if (searchbox.length < 3 ) {
          $("#display").hide();
   } else {

Answer 3

Why not do

if(isset($_POST['searchword']) && $_POST['searchword']) 

Then, when you do not set the search word, html will not be generated, which will lead to an empty result, which will replace html.