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.

Subscribe Our Newsletter And Get Tutorials
And Offers Via Email

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.