Question

我正在尝试创建一个webapp，并且我使用了另一个站点的php，ajax和mysql搜索功能。

它目前允许我搜索数据库并返回我想要的内容。我唯一的问题是它在一个简单的文本框中返回结果。我希望能够在表格中返回结果。

搜索只是在数据库中搜索姓氏，姓氏，地址等......这是我的代码。

PHP：

<?php

include('config.php');

if(isset($_GET['search_word']))
{
$search_word=$_GET['search_word'];

$sql=mysql_query("SELECT * FROM info WHERE CONCAT(Forename,' ',Surname) LIKE '%$search_word%'or Address1 LIKE '%$search_word%' or Address2 LIKE '%$search_word%' or Postcode LIKE '%$search_word%' or DOB LIKE '%$search_word%' ORDER BY ID DESC LIMIT 20 ");
$count=mysql_num_rows($sql);

if($count > 0)
{

while($row=mysql_fetch_array($sql))
{
$result = $row['Forename'].' '.$row['Surname'].' '.$row['DOB'].' '.$row['Address1'].' '.$row['Address2'].' '.$row['Postcode'];
$bold_word='<b>'.$search_word.'</b>';
$final_msg = str_ireplace($search_word, $bold_word, $result);
?>

<li><?php echo $final_msg; ?></li>
<?php
}
}
else
{

echo "<li>No Results</li>";

}


}
?>

这是连接到数据库并提取结果。然后我有我的HTML等...：

脚本：

$(function() {
//-------------- Update Button-----------------


$(".search_button").click(function() {
    var search_word = $("#search_box").val();
    var dataString = 'search_word='+ search_word;

    if(search_word=='')
    {
    }
    else
    {
    $.ajax({
    type: "GET",
    url: "searchdata.php",
    data: dataString,
    cache: false,
    beforeSend: function(html) {

    document.getElementById("insert_search").innerHTML = '';

    $("#flash").show();
    $("#searchword").show();
     $(".searchword").html(search_word);
    $("#flash").html('<img src="ajax-loader.gif" align="absmiddle">&nbsp;Loading Results...');



            },
  success: function(html){
    $("#insert_search").show();
    $("#insert_search").append(html);
    $("#flash").hide();
   // $("#MainTable").append(data);
    if(html.length > 0)
            {
                $("#MainTable tr:not(:first-child)").remove();
            }
            for(var i = 0; i < html.length; i++)
            {
                var date = new Date(html[i]["Timestamp"]*1000);
                html[i]["Timestamp"] = date.getHours()+":"+date.getMinutes();
                $("#MainTable").append("<tr><td><a href='#' id='info"+data[i]["ID"]+"' data-role='button' data-theme='b' data-icon='check' data-iconpos='notext' class='id'></a></td><td>"+data[i]["Timestamp"]+"</td><td>"+data[i]["ID"]+"</td><td>"+data[i]["Forename"]+" "+data[i]["Surname"]+"</td><td class='hidden'>"+data[i]["ID"]+"</td><td>"+data[i]["DOB"]+"</td><td class='hidden'>"+data[i]["Address2"]+"</td><td class='hidden'>"+data[i]["Town"]+"</td><td class='hidden'>"+data[i]["City"]+"</td><td class='hidden'>"+data[i]["County"]+"</td><td>"+data[i]["Address1"]+"</td><td>"+data[i]["Postcode"]+"</td><td class='hidden'>"+data[i]["Phone2"]+"</td><td class='hidden'>"+data[i]["DOB"]+"</td></tr>");                                
                if(data[i]["Completed"] == "1")
                {
                    $("#MainTable tr:last-child td").addClass("lineThrough");
                }
                $("#MainTable tr:last td:first a, #MainTable tr:last td:last a").button();

}




  }
});

    }




    return false;
    });
//---------------- Delete Button----------------


});

我尝试了一些不同的东西，例如将表格脚本中的+ Data +更改为html或尝试添加追加（html），但我没有运气，当我搜索时，我在我的表中未定义或者它是完全空白。

这是我桌子的HTML：

<table data-role="table" id="MainTable" data-mode="columntoggle">
                    <tr><th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th><th>ID Number</th><th>Name</th><th>DOB</th><th>Address</th><th>Postcode</th></tr>
                    <tr><td colspan='7'>No data currently available, connect to the internet to fetch the latest appointments.</td></tr>
            </table>

感谢任何帮助。希望这是有道理的。

Answer 1

而不是在您的php页面输出：

 while($row=mysql_fetch_array($sql))
 {
 $result = $row['Forename'].' '.$row['Surname'].' '.$row['DOB'].' '.$row['Address1'].' '.$row['Address2'].' '.$row['Postcode'];
 $bold_word='<b>'.$search_word.'</b>';
 $final_msg = str_ireplace($search_word, $bold_word, $result);
 ?>

 <li><?php echo $final_msg; ?></li>

遍历结果，以您需要的表格格式输出它们，例如：

echo "<tr>";
echo "<td>".$row['Forename']."</td>"; 
echo "<td>".$row['Surname']."</td>";
//etc
echo "</tr>"

然后获取该响应并使用（jquery AJAX）填充包含的表格，如：

 .done(function( response ) {
    $('#MainTable').html(response);
 }

Answer 2

的变化：

if($count > 0)
{
    while($row=mysql_fetch_array($sql))
    {
    $result = $row['Forename'].' '.$row['Surname'].' '.$row['DOB'].' '.$row['Address1'].' '.$row['Address2'].' '.$row['Postcode'];
    $bold_word='<b>'.$search_word.'</b>';
    $final_msg = str_ireplace($search_word, $bold_word, $result);
    ?>
    <tr>
        <td>&nbsp;</td>
        <td><?=$row['id']?></td>
        <td><?=$final_msg?></td>
        <td><?=$row['address']?></td>
        <td><?=$row['postcode']?></td>
    </tr>

    <?php
    }
}
else
{

    echo "<li>No Results</li>";

}

JS

的变化

$.ajax({
    type: "GET",
    url: "searchdata.php",
    data: dataString,
    cache: false,
    beforeSend: function(html) {
        document.getElementById("insert_search").innerHTML = '';

        $("#flash").show();
        $("#searchword").show();
        $(".searchword").html(search_word);
        $("#flash").html('<img src="ajax-loader.gif" align="absmiddle">&nbsp;Loading Results...');
    },
    success: function(html){
        $("#insert_search").show();
        $("#insert_search").append(html);
        $("#flash").hide();
        $("#MainTable").append(html); //<-- append the data from the ajax
    }
});

将PHP和AJAX搜索结果放入表中

2 个答案: