Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

Basic Instant FullText Search System Using Ajax And PHP.

Tuesday, Apr 4, 2017

Tags:- Ajax jQuery PHP MySQL


In this tutorial we will help you to create a basic Instant FullText Search System using Ajax and PHP.You may also like create your own search engine using PHP and jQuery.


See Demo
FullText Search


To create a basic instant fulltext search using ajax and PHP it takes only three steps:-

  1. Make a HTML file and define markup and script for fulltext searching
  2. Make a CSS file and define styling for instant fulltext search system
  3. Connect to the database and Send data


Step 1.Make A HTML file and define markup and script for fulltext searching

We make a HTML file and save it with a name search.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="search_style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $( "#find" ).keyup(function(){
  fetch();
 });
});

function fetch()
{
 var val = document.getElementById( "find" ).value;
 $.ajax({
 type: 'post',
 url: 'fetch.php',
 data: {
  get_val:val
 },
 success: function (response) {
  document.getElementById( "search_items" ).innerHTML = response; 
 }
 });
}
</script>

</head>

<body>
<div id="search_box">
 <center>
  <p id="heading">Instant FullText Search System Using Ajax And PHP</p>
  <form method='get' action='fetch.php'>
   <input type="text" name="get_val" id="find" placeholder="Enter Your Text Here">
   <input type="submit" name="search" id="search" value="Search">
  </form>
  <div id="search_items">
  </div>
 </center>
</div>
   
</body>
</html>

In this step we use keyup event for instant search every time the user type any alphabet ajax sends the request to fetch.php file and get the data and then display in search_items div.You can use any event handler as per your need.You may also like simple instant comment system using ajax.



Step 2.Make a CSS file and define styling for instant fulltext search system

We make a CSS file and save it with name search_style.css.

body
{
 font-family:helvetica;
}
#heading
{
 text-align:center;
 margin-top:150px;
 font-size:30px;
 color:blue;
}
#find
{
 width:400px;
 height:40px;
 font-size:17px;
 padding:10px;
}
#search
{
 background-color:#8181F7;
 height:40px;
 color:white;
 border:none;
 font-size:17px;
}
#search_items
{
 background-color:#F2F2F2;
 width:400px;
 margin:0px;
 margin-left:-75px;
 margin-top:-15px;
}
#search_items a
{
 color:#585858;
 text-decoration:none;
 display:block;
 padding:5px;
 margin-top:10px;
 text-align:left;
}
#search_items a:hover
{
 background-color:#8181F7;
 color:white;
}


Step 3.Connect to the database and Send data

We make a PHP file save it with a name fetch.php which is used to connect and fetch data and then send data to search.html file on ajax request.

<?php
if(isset($_REQUEST['get_val']))
{
 $term = $_REQUEST['get_val'];
 $find = mysql_query( "select * from language where MATCH(name,description) AGAINST( '$term' )" );
 while($row = mysql_fetch_array($find))
 {
  echo "<a href='fetch.php?findval=".$row['name']."'>";
  echo $row['name']."<br>";
  echo $row['description'];
  echo "</a>";
 }
 exit;
}

if(isset($_REQUEST['findval']))
{
 $findval = $_REQUEST['findval'];
 $find = mysql_query( "select * from language where name = '$findval' " );
 while($row = mysql_fetch_array($find))
 {
  echo $row['name']."<br>";
  echo $row['description'];
  echo "</a>";
 }
 exit;
}
?>

First if statement in this is used to fetch data for ajax request and second one is used when the used click on links searched by the user and also when the user clicks on search button. You may also like highlight words on search using JavaScript.


Thats all, this is how to create a basic instant fulltext search system using ajax and PHP.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email

Subscribe TalkersCode! One Of The Best
Web Development And Review Blog

Get Latest Tutorials And Reviews
Via Email