Show Search Results in a Pop-up Div
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.
