Search Results display inside of modal - php

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