Search Results display inside of modal

Question

• i have a basic search form @ service.php
• Currently the search results display @ search.php
• i want the results display @ service.php inside modal "bootstrap" instate of moving to search.php

Thank you

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

Answer 1

So display it inside a modal you should definitely need an ajax request.

So first is:

• make your search.php returns a json encoded result

  Based on your code above you can return the json encoded result like this:

  return json_encode($news);

• then grab the result using an ajax request

• then display it by target the modal body element

You could choose an vanilla JS of Ajax or Jquery Ajax