搜索结果显示在模态

时间:2017-11-18 14:06:15

标签: php

  • 我有一个基本的搜索表单@ service.php
  • 目前搜索结果显示为@ search.php
  • 我希望结果显示@ service.php在modal" bootstrap"移动到search.php的实例

谢谢

service.php

<form class="input-group" method="post">
<input type="text" class="form-control" name="keyword" placeholder="search..." /> 
<span class="input-group-btn">
<button class="btn btn-primary" data-toggle="modal" data-target=".bs example-modal-lg" href="index.php"><i class="fa fa-search"></i></button>
</span>
</form>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- modal body -->
<div class="modal-body">
Search Results 
</div>
<!-- /modal body -->

</div>
</div>
</div>

的search.php     

$page   =   1;
if(isset($_GET['page'])){
    $page   =   $_GET['page'];
}
$searchQuery    =   '';
if(isset($_GET['keyword'])){
    $keyword        =   $_GET['keyword'];
    $searchQuery    =   '(serviceTitle LIKE "%'.$keyword.'%" or serviceDescription LIKE "%'.$keyword.'%")';
}


//  get total news rows
$countRset  =   mysql_query('SELECT COUNT(*) as Total FROM service where '.$searchQuery);
$countRows  =   mysql_fetch_assoc($countRset);
$countRows  =   $countRows['Total'];
//  get news by page
$limitPerPage   =   20;
$startPage      =   0;
if($page>1){
    $startPage  =   ($page-1)*$limitPerPage;
}
$newsRset   =   mysql_query('SELECT * FROM service where '.$searchQuery.' order by serviceID desc LIMIT '.$startPage.', '.$limitPerPage);
$news       =   array();
while($row  =   mysql_fetch_array($newsRset)){
    array_push($news, $row);
}


?>

 <?php foreach($news as $key=>$item){?>
    <?php echo $item['serviceTitle']; ?> ......
 <?php }?>

1 个答案:

答案 0 :(得分:-1)

所以在模态中显示它你肯定需要一个ajax请求。

首先是:

  • 使您的search.php返回json编码结果

    根据上面的代码,您可以返回json编码的结果:

    返回json_encode($ news);

  • 然后使用ajax请求获取结果

  • 然后通过目标模态体元素
  • 显示它

您可以选择Ajax或Jquery Ajax的vanilla JS