Basic Instant FullText Search System Using Ajax And PHP
Last Updated : Apr 15, 2022
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.
CHECK OUT THIS TUTORIAL LIVE DEMO →
To create a basic instant fulltext search using ajax and PHP it takes only three steps:-
- Make a HTML file and define markup and script for fulltext searching
- Make a CSS file and define styling for instant fulltext search system
- 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.
Latest Tutorials
- Create Animated Skill Bar Using jQuery, HTML And CSS
- Simple And Best Responsive Web Design Using CSS Part 2
- Show Button On Hover Using HTML And CSS
- Material Design Login Form Using jQuery And CSS
- Animated Progress Bar Using jQuery And CSS
- Dynamic Drop Down Menu Using jQuery, Ajax, PHP And MySQL
- Get Website Statistics Using PHP, jQuery And MySQL
- HTML5 Login And Signup Form With Animation Using jQuery
- Facebook Style Homepage Design Using HTML And CSS
- View Webpage In Fullscreen Using jQuery