Search box
HOW TO CREATE A SEARCH ENGINE FOR YOUR WEBSITE
enter your gmail id & password & make login
(2)then click on add button :
(3)after that enter your site url for example
https://www.phpdevelopemnttricks.blogspot.com and select language and enter name of search engine then click on Create ..
(4)then your will for following to get your code :
(5)after click on Get code you will see following code just copy and paste inside your <div > tag where you want to display search engine box ..
(6)here is the sample html code for example :
<html>
<body>
<div>
<script>
(function() {
var cx = '013461944738121217145:ogsz8ox40jm';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
</div>
</body>
</html>
output :
FACEBOOK TYPE SEARCH BOX AUTOMATIC USING JQUERY & AJAX & PHP
PHP CODE FOR SEARCHING EXAMPLE LIKE FACEBOOK:
(1)CREATE TABLE test_auto_complete :
Create table test_auto_complete
(uid int(10),
Username varchar(200),
Email varchar(200),
media varchar(200),
country varchar(200));
(2)write code for “searchform.html” :
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.0.min.js"></script>
<style type="text/css">
body{
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
}
.contentArea{
width:600px;
margin:0 auto;
}
#inputSearch
{
width:350px;
border:solid 1px #000;
padding:3px;
}
#divResult
{
position:absolute;
width:350px;
display:none;
margin-top:-1px;
border:solid 1px #dedede;
border-top:0px;
overflow:hidden;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
-moz-border-bottom-right-radius: 6px;
-moz-border-bottom-left-radius: 6px;
box-shadow: 0px 0px 5px #999;
border-width: 3px 1px 1px;
border-style: solid;
border-color: #333 #DEDEDE #DEDEDE;
background-color: white;
}
.display_box
{
padding:4px; border-top:solid 1px #dedede;
font-size:12px; height:50px;
}
.display_box:hover
{
background:#3bb998;
color:#FFFFFF;
cursor:pointer;
}
</style>
<script>
$(function(){
$(".search").keyup(function()
{
var inputSearch = $(this).val();
var dataString = 'searchword='+ inputSearch;
if(inputSearch!='')
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#divResult").html(html).show();
}
});
}return false;
});
jQuery("#divResult").live("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#inputSearch').val(decoded);
});
jQuery(document).live("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#divResult").fadeOut();
}
});
$('#inputSearch').click(function(){
jQuery("#divResult").fadeIn();
});
});
</script>
</head>
<body>
<input type="text" class="search" id="inputSearch" />Ex: om, arun, pranita<br />
<div id="divResult">
</div>
</div>
</body>
</html>
(2)write code for “search.php” file:
<?php
include('db.php');
if($_POST)
{
$q=$_POST['searchword'];
$sql_res=mysql_query("select uid,username,email,media,country from test_auto_complete where username like '%$q%' or email like '%$q%' order by uid LIMIT 5");
while($row=mysql_fetch_array($sql_res))
{
$username=$row['username'];
$email=$row['email'];
$media=$row['media'];
$country=$row['country'];
$b_username='<b>'.$q.'</b>';
$b_email='<b>'.$q.'</b>';
$final_username = str_ireplace($q, $b_username, $username);
$final_email = str_ireplace($q, $b_email, $email);
?>
<div class="display_box" align="left">
<img src="img/<?php echo $media; ?>" style="width:50px; height:50px; float:left; margin-right:6px;" /><span class="name"><?php echo $final_username; ?></span> <br/><?php echo $final_email; ?><br/>
<span style="font-size:9px; color:#999999"><?php echo $country; ?></span></div>
<?php
}
}
?>
note: img is folder name where all images will be kept
Comments
Post a Comment