AJAX实时搜索未显示结果

时间:2015-02-05 01:10:42

标签: javascript php jquery mysql ajax

如下面的livesearch.php所示,有一个实时搜索页面,当在输入框中键入条目时,未在其下显示任何结果。 search.php中的html代码和脚本显示为beelow。

的search.php

   <!DOCTYPE HTML>
    <html>
       <header>
            <link href="css/main.css" rel="stylesheet" type="text/css">
            <link href="css/search.css" rel="stylesheet" type="text/css">
       </header>
       <body>
            <div id="searchContainer">
                <div class="searchMainTitle">Search Schedules</div>
                    <div class="searchSubTitle">
                <p>Enter any information you wish, this will search all schedule fields.</p>
                </div>
            <form role="form" method="post">
                <input type="text" class="form-control" size="100%" placeholder="Enter Search Term(s) Here" id="keyword" />
            </form>
                    <ul id="liveSearch"></ul>       

        </div>
        <script type="text/javascript">
        $(document).ready(function() {
        $('#keyword').on('input', function() {
            var searchKeyword = $(this).val();
            if (searchKeyword.length >= 3) {
        $.post('livesearch.php', { keywords: searchKeyword }, function(data) {
                    $('ul#liveSearch').empty()
                    $.each(data, function() {
                    $('ul#liveSearch').append('<li><a href="schedPopup.php?id=' + this.id + '">' + this.title + '</a></li>');  
                    });
                }, "json"); 
            }
        });
    }); 
        </script> 
    </body>
</html>

脚本引用的livesearch.php如下所示

livesearch.php

<?php
session_start();

require 'dbconnect.php';

echo "Keyword: ".$_POST['keywords']."<br/><br/>";
    $liveSearchArray = array();
        if (!empty($_POST['keywords'])) {
            $keywords = $connection->real_escape_string($_POST['keywords']);
            $sql = "SELECT OWNER_SURNAME,OWNER_FIRSTNAMES,OWNER_TITLE FROM testucm_owners WHERE OWNER_SURNAME LIKE '%".$keywords."%'";
            $result = $connection->query($sql);
            if ($result->num_rows > 0) {
                echo "We Have A Result, There Are ".$result->num_rows." Rows";
                while ($obj = $result->fetch_object()) {
                    $liveSearchArray[] = array('id' => $obj->OWNER_SURNAME, 'title' => $obj->OWNER_TITLE);
                }
            } else {
                echo "No Matches";
            }
        }

 echo json_encode($liveSearchArray);

 mysqli_close($connection);
?> 

如果手动将关键字的值添加到livesearch.php查询中,我会得到正确的结果,但是如果我通过search.php输入搜索条件,则不会显示任何结果。我通过在var searchKeyword = $(this).val();之后发出警报对此进行了部分测试,这显示了输入的正确字词,但仍未显示结果。

我怀疑这段代码可能出错:

$('ul#liveSearch').append('<li><a href="schedPopup.php?id=' + this.id + '">' + this.title + '</a></li>'); 

由于某种原因,$ liveSearchArray没有被传递回脚本,但是我无法确定错误所在的位置或如何修复它。任何帮助将不胜感激

1 个答案:

答案 0 :(得分:2)

也许你应该检查php返回数据。 这里:

 echo "We Have A Result, There Are ".$result->num_rows." Rows";

看,返回数据不是纯粹的json。 我认为这可能是关键。

当你期望&#34; json&#34;的数据时,你必须保持返回数据只是json,而不是其他任何东西。否则,ajax将得到一个解析错误,它不会直接显示,而你的& #34;成功&#34;功能将无法执行。您似乎无法获取数据,但实际上它是因为您获取了错误的格式数据。

它的工作原理如下:ajax test