神刀安全网

Basic Instant FullText Search System Using Ajax And PHP

Tags:-Ajax jQuery PHP MySQL

In this tutorial we will help you to create a basic Instant FullText Search System using Ajax and PHP.

See Demo

Basic Instant FullText Search System Using Ajax And PHP

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.

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 onsearch button.

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.

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Basic Instant FullText Search System Using Ajax And PHP

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址