db.sql
Database file run in your mysql to create database and add data in table.
---------------------------------------------------
create database `phpgang`;
Your index file where you have to add text box and include js and css.<div class="content">
script type="text/javascript" src="jquery-1.8.0.min.js"></script> <script type="text/javascript"> $(function(){ $(".search").keyup(function() { var searchid = $(this).val(); var dataString = \'search=\'+ searchid; if(searchid!=\'\') { $.ajax({ type: "POST", url: "search.php", data: dataString, cache: false, success: function(html) { $("#result").html(html).show(); } }); }return false; }); jQuery("#result").live("click",function(e){ var $clicked = $(e.target); var $name = $clicked.find(\'.name\').html(); var decoded = $("<div/>").html($name).text(); $(\'#searchid\').val(decoded); }); jQuery(document).live("click", function(e) { var $clicked = $(e.target); if (! $clicked.hasClass("search")){ jQuery("#result").fadeOut(); } }); $(\'#searchid\').click(function(){ jQuery("#result").fadeIn(); }); }); </script>
Database file run in your mysql to create database and add data in table.
---------------------------------------------------
create database `phpgang`;
use `phpgang`;
CREATE TABLE `live_search` (
`id` int(10) NOT NULL auto_increment,
`name` varchar(255) NOT NULL,
`email` varchar(100) NOT NULL,
`date` timestamp NOT NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
INSERT INTO `live_search` VALUES (1, 'Huzoor Bux', 'huzoorbux@gmail.com', '2013-08-29 11:04:36');
INSERT INTO `live_search` VALUES (2, 'Sameer Khan', 's_khan@gmail.com', '2013-08-29 11:04:36');
INSERT INTO `live_search` VALUES (3, 'Ravi Khana', 'r_khana@phpgang.com', '2013-08-29 11:05:31');
INSERT INTO `live_search` VALUES (4, 'Neelam Ara', 'neelam@phpgang.com', '2013-08-29 11:05:31');
db.php
Database configuration file edit database name, user and password as per your configuration.
<?php
$connection = mysql_connect('localhost','phpgang','********') or die(mysql_error());
$database = mysql_select_db('phpgang') or die(mysql_error());
?>
index.phpYour index file where you have to add text box and include js and css.<div class="content">
<input type="text" class="search" id="searchid" placeholder="Search for people" /> Ex: <b><i>huzoor bux, neelam, ravi or sameer</i></b><br />
<div id="result"></div>
</div>
JavaScript
Here is the javascript you need to add in you file which can show you data on key press.
script type="text/javascript" src="jquery-1.8.0.min.js"></script> <script type="text/javascript"> $(function(){ $(".search").keyup(function() { var searchid = $(this).val(); var dataString = \'search=\'+ searchid; if(searchid!=\'\') { $.ajax({ type: "POST", url: "search.php", data: dataString, cache: false, success: function(html) { $("#result").html(html).show(); } }); }return false; }); jQuery("#result").live("click",function(e){ var $clicked = $(e.target); var $name = $clicked.find(\'.name\').html(); var decoded = $("<div/>").html($name).text(); $(\'#searchid\').val(decoded); }); jQuery(document).live("click", function(e) { var $clicked = $(e.target); if (! $clicked.hasClass("search")){ jQuery("#result").fadeOut(); } }); $(\'#searchid\').click(function(){ jQuery("#result").fadeIn(); }); }); </script>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".search").keyup(function()
{
var searchid = $(this).val();
var dataString = \'search=\'+ searchid;
if(searchid!=\'\')
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;
});
jQuery("#result").live("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find(\'.name\').html();
var decoded = $("<div/>").html($name).text();
$(\'#searchid\').val(decoded);
});
jQuery(document).live("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#result").fadeOut();
}
});
$(\'#searchid\').click(function(){
jQuery("#result").fadeIn();
});
});
</script>
CSS
CSS i have used in this tutorial to show result well decorated as below.
<style type="text/css">
.content{
width:900px;
margin:0 auto;
}
#searchid
{
width:500px;
border:solid 1px #000;
padding:10px;
font-size:14px;
}
#result
{
position:absolute;
width:500px;
padding:10px;
display:none;
margin-top:-1px;
border-top:0px;
overflow:hidden;
border:1px #CCC solid;
background-color: white;
}
.show
{
padding:10px;
border-bottom:1px #999 dashed;
font-size:15px;
height:50px;
}
.show:hover
{
background:#4c66a4;
color:#FFF;
cursor:pointer;
}
</style>
Last file you have to create to fetch results from database.
result.php
I have used direct mysql queries to fetch records but you can also use mysqli or PDO as mysql_connect deprecated in PHP 5.5.
<?php
include('db.php');
if($_POST)
{
$q = mysql_real_escape_string($_POST['search']);
$strSQL_Result = mysql_query("select id,name,email from live_search where name like '%$q%' or email like '%$q%' order by id LIMIT 5");
while($row=mysql_fetch_array($strSQL_Result))
{
$username = $row['name'];
$email = $row['email'];
$b_username = '<strong>'.$q.'</strong>';
$b_email = '<strong>'.$q.'</strong>';
$final_username = str_ireplace($q, $b_username, $username);
$final_email = str_ireplace($q, $b_email, $email);
?>
<div class="show" align="left">
<img src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-prn1/27301_312848892150607_553904419_n.jpg" style="width:50px; height:50px; float:left; margin-right:6px;" /><span class="name"><?php echo $final_username; ?></span> <br/><?php echo $final_email; ?><br/>
</div>
<?php
}
}
?>
|
댓글
댓글 쓰기