Show Search Results in a Pop-up Div

It uses MySQL as the database. Basically, the search results will pop up.

Here's the code below:

<script type="text/javascript">    
    $(document).ready( function() {  
     function unloadPopupBox() {    
            $('#result').fadeOut("slow");
            $("#container").removeClass("addcon");
        }    
        
        function loadPopupBox() {    
            $('#result').fadeIn("slow");
            $("#container").addClass("addcon");
        }          
        $('#close').click( function() { 
     $("#show_result").empty();
            unloadPopupBox(); 
        });
        
        $('#popsearch').click( function() {
            loadPopupBox();
        });      
    });
</script>

<script type="text/javascript">
$(function() {
$("#popsearch").click(function() {        
var searchtitle = $("#searchtitle").val();
var dataString ='&searchtitle=' + searchtitle;
$.ajax({
type: "POST",
url: "searchaction.php",
data: dataString,
cache: true,
success: function(html){
$("#show_result").append(html);
}  
});
return false;
});
});
</script> 

Place the above code before "</head>" and this on the "<body>".

<div id="result"> 
<a id="close">X</a>   
<div id="show_result">
<!--where the result will display-->
</div>
</div>
<div id="container">
....some contents here
</div>

Here's the CSS:

#result { 
    display:none; /*hide the result div on the page*/
    position:fixed;  
    height:400px;  
    width:800px;  
    background:#333;  
    top: 50%;
   left: 50%;
    z-index:100; /*layering, showing it on top of other div*/
 margin-top:-200px; /* to center the result div half of the height*/
 margin-left:-400px;/* to center the result div half of the width*/
 border-radius:10px;
    border-bottom:5px #999999 solid; 
    font-size:12px;  
 padding:10px;
}

#container {
    width:100%;
    height:100%;
}


#close {
    font-size:20px;  
    line-height:15px;  
    right:5px;  
    top:5px;  
    position:absolute;  
    color:#fff;  
    font-weight:bold;
 cursor:pointer;
 z-index:200  
}

.addcon{
 opacity: 0.1; 
 pointer-events:none
 }
 
#show_result{
 width:800px;
 height:390px;
 }

#tblresult{
 color:#fff;
 width:800px;
 z-index:1000;
 padding:10px;
 }
tr:nth-child(even) {background: #CCC}
tr:nth-child(even) a {color: #333}
tr:nth-child(odd) {background: #333}

 
.notfound{
 color:#999;
 font-size:14px;
 text-align:center;
 font-weight:bold
 } 
i{color:#00CC00}
input[type="search"]{
 width:200px;
 height:35px;
 line-height:16px;
 font-family:Verdana, Geneva, sans-serif;
 border:1px solid #CCC;
 border-radius:5px;
 }


input[type="submit"]#popsearch{
 width:80px;
 height:35px;
 cursor:pointer;
 line-height:16px;
 font-family:Verdana, Geneva, sans-serif;
 font-weight:bold;
 border:1px solid #CCC;
 border-radius:5px;
 }

Lastly, the query on your database:

<?php
//error_reporting(0);
include('include/config.php');
$search=$_POST['searchtitle'];
 
if($search != ' '){
 $result = mysql_query("select *from proj where projtitle LIKE '%$search%' ORDER BY projtitle LIMIT 0,15"); 
 $count = mysql_num_rows($result);
 if($count<1){
  echo "<div class='notfound'>No Project Found.</div>";
  }
 else{
 echo "<font style='color:#fff'>Project Title Keyword: <i>$search</i> <br/> Search Result: $count project(s) found. </font>";
 echo "<table id='tblresult'>";
 echo "<tr>";
 echo "<td width='50%'><b>Project Title</b></td>";
 echo "<td width='50%'><b>Action</b></td>"; 
 echo "</tr>";
 while($row = mysql_fetch_array($result)){
 $projtitle=ucwords($row['projtitle']);
 $projid=$row['projid'];
 echo "<tr>";
 echo "<td><a href='viewproj.php?projid=$projid' target='_blank' title='View more details...' class='projtitle'>$projtitle</a></td>";
 echo "<td><a href='printproj.php?projid=$projid' class='projtitle' target='_blank'>Print</a></td>"; 
echo "</tr>";
 }
 echo "</table>";
 }
}
?>

Change the necessary variables.