27 December, 2012

Google like seach engine with jQuery,PHP and MySQL.

0 Flares Facebook 0 Twitter 0 Google+ 0 Pin It Share 0 Email -- Email to a friend Buffer 0 Buffer 0 Flares ×

After long days back i made a google like seach engine,this engine is a collaboration of PHP, MySQL and jQuery. i was working on it from many days but due to some busy days it delay.so today we will discuss about what is behind its back.

harry

So take a look on live demo, seach word “jquery”

Nuts And Bolts

Download the Script code. Edit database_connection.php change the database details.

database_connection.php

1
2
3
4
5
6
7
CREATE TABLE IF NOT EXISTS `search` (
  `searchid` int(5) NOT NULL AUTO_INCREMENT,
  `searchlink` varchar(200) NOT NULL,
  `searchtitle` varchar(200) NOT NULL,
  `seachdescription` varchar(500) NOT NULL,
  PRIMARY KEY (`searchid`)
)

index.html
index.html contains javascript and HTML code.Take a look at input field search value

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script type="text/javascript">

$(document).ready(function() {
$("#faq_search_input").watermark("Search Here");
$("#faq_search_input").keyup(function()
{
var faq_search_input = $(this).val();
var dataString = 'keyword='+ faq_search_input;
if(faq_search_input.length>3)
{
$.ajax({
type: "GET",
url: "ajax-search.php",
data: dataString,
beforeSend:  function() {
$('input#faq_search_input').addClass('loading');
},
success: function(server_response)
{
$('#searchresultdata').html(server_response).show();
$('span#faq_category_title').html(faq_search_input);
if ($('input#faq_search_input').hasClass("loading")) {
 $("input#faq_search_input").removeClass("loading");
} 
}
});
}return false;
});
});
      
</script>

<input name="query" type="text" id="faq_search_input" class="searchboxa"/>
<div id="searchresultdata" class="faq-articles">
</div>

ajax-search.php
ajax-search.php contains PHP code to Display search results

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
< ?php
include_once ('database_connection.php');
if(isset($_GET['keyword']))
{
$keyword =  trim($_GET['keyword']) ;
$keyword = mysqli_real_escape_string($dbc, $keyword);
$query = "select searchtitle,searchdescription,searchlink from search where
 searchtitle like '%$keyword%' or searchdescription like '%$keyword%'";
$result = mysqli_query($dbc,$query);
if($result)
{
echo '<div class="jksgsdg">Results for : <span>'.$_GET['keyword'].'</span>
';
if(mysqli_affected_rows($dbc)!=0)
{
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC))
{      
echo '<div class="bsvkdsv"> <a href='.$row['topiclink'].'>
<h2>'.$row['topictitle'].'</h2></a>
<a href='.$row['topiclink'].'><h3>'.$row['topiclink'].'</h3></a>
 <p>'.$row['topicdescription'].'</p></div>';
}
}
else 
{
echo '<div class="jsbdkjvgd">No Results Found <br />Try Something else like 
"jQuery","Database" etc</div>';
}
}
}
else
{
echo 'Parameter Missing';
}
?>

To add watermark on input box
To show the information text in search input field.

1
2
3
4
5
<script>
$(document).ready(function() {
$("#faq_search_input").watermark("Search Here");
});
</script>

ooo

stark.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.faq-articles {
    margin-left: 186px;
    width: 600px;
}
.faq-articles h2 {
    color: #1122CC;
    cursor: pointer;
    font-size: 16px;
    font-weight: normal;
    text-align: left;
    text-decoration: underline;
}
.faq-articles h3 {
    color: #009933;
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
    text-align: left;
}
.faq-articles p {
    color: #000000;
    font-size: 13px;
    padding-top: 3px;
    text-align: left;
}

You can make more changes in css for more better.

If you have any queries, just post a comment.

Harry Saggu

Harry Saggu

Admin at Starkbook
♛ A Web-designer, front-end developer and founder of Starkbook Webdesign Blog. I love working with every creative things and doing it right way. So I always try to provide best designing stuff to our readers.
Harry Saggu

Join Our Free Email Newsletter

To Get A Free E-Book:"The Wordpress Anthology" Now !

Web Designers Ultimate 3 Book Bundle

Get It Now*

Start Your Website
With Wordpress.
Latest Comments
  1. Roshan singh

    Dear sir.
    i am very thankful for your script,it work very well on localhost but i have one problem,but when i host this script on server, it not work proper,what is exact problem i don’t know,please help me how work on search engine on from server database

  2. Harry Saggu

    What error you are getting after deployment of this widget on server ?

    • siddhu

      where to i download it boss

  3. mannnq

    Bro, can i ask for your ‘demo’ database? Cant found the download link. Thanks for.

  4. arju shing

    how to download this tutorial…..

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Starkbook Webdesign Blog
  • Join Our Free Email Updates
  • Get Webdesigning Stuff Direct In Your Inbox
  • You Will Get Many Code-Snippets, Freebies, Wordpress Themes, Web-Designing Stuff etc. On Starkbook
  • Stay Always Conneted With Starkbook

Subscribe for Free Email Updates

Get our latest updates direct in your inbox.Just enter your email address above...

Your privacy and email address are safe with us!
Ver peliculas online
0 Flares Facebook 0 Twitter 0 Google+ 0 Pin It Share 0 Email -- Email to a friend Buffer 0 Buffer 0 Flares ×