✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Basic Instant FullText Search System Using Ajax And PHP

Last Updated : Jul 1, 2023

IN - Ajax jQuery PHP MySQL | Written & Updated By - Dikshita

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.

Basic Instant FullText Search System Using Ajax And PHP

CHECK OUT THIS TUTORIAL LIVE DEMO →

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.

I hope this tutorial on full-text search mysql php helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →