从 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

您可以将点击事件附加到每个框架的正文元素并在那里隐藏结果。框架的 dom 可从 window 对象中获得，例如：

window.frames['myframe'].document

如果您需要从框架中访问窗口对象，请使用：

window.parent

这样您就可以从任何框架访问结果。唯一烦人的是你需要添加代码来隐藏所有帧中的结果。

希望对您有所帮助。

J.

编辑：

澄清一下。如果要在其中一个框架中隐藏 div，则需要在页面的每个框架中都有隐藏代码。假设您的页面有两个框架：搜索结果所在的“mainFrame”和“searchFrame”。

在 'mainFrame' 中你会有这样的代码：

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

在“搜索框”中：

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

为什么不这样做

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

那么当你不设置搜索词时，不会生成html，导致替换html的结果为空。