Очистить результаты, возвращенные из поля Jquery, PHP, MySQL

Question

У меня есть поле поиска, которое позволяет участнику ввести часть имени клиента, и результаты возвращаются таким же образом, как и в случае с раскрывающимся списком Facebook.Однако я сталкиваюсь с несколькими препятствиями:

1. Когда текстовое поле очищается ИЛИ член щелкает в любом месте экрана, возвращаемые результаты также не очищаются и остаются на странице до обновления илистраница выхода.Это действительно довольно раздражает.

JS код:

<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

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

кто-нибудь имел эту проблему раньше?Как мне очистить результаты моего php-скрипта, если поле было пустым или если щелчок произошел в ЛЮБОЙ другой области экрана (кроме полученных результатов)?

ПРИМЕЧАНИЕ:

Моя страницапостроена с набором фреймов из 4 страниц (вверху, слева, в центре и в середине), поэтому этот вопрос немного сложнее, чем обычный.Когда я помещаю исправление в свой исходный код (то есть страницы php), я сталкиваюсь с несколькими ошибками «заблокирован из-за небезопасного содержимого».

в частности, заголовок каждой из моих страниц php имеет следующий код для предотвращения входа в систему вне соединений https и для сеансов:

<?php
session_start();

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

?>

Answer 1

Это должно помочь скрыть результаты поиска при щелчке где-либо еще:

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

Если у вас есть обработчики кликов, возвращающие false, они предотвратят всплывание события до элемента body.Если это не то, что вам нужно, вы можете использовать event.preventDefault(), чтобы предотвратить действие по умолчанию, не останавливая распространение события.

Чтобы скрыть результаты при удалении поискового запроса, измените эту строку:

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

до:

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

Answer 2

Вы можете прикрепить событие 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 3

Почему бы не сделать

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

Тогда, если вы не установите поисковое слово, html не будет сгенерирован, что приведет к пустому результату, который заменит html.