PHP AJAX Live Search

Hi Friends today we are going to learn how to create php ajax live search engine..
just follow the below php ajax search example..
Files Structure:

PHP AJAX Live Search

=>Database and Table Structure:
Database Name: codenair
Table Name: topic

Table topic Structure:

CREATE TABLE IF NOT EXISTS `topic` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(100) NOT NULL,
  `content` longtext NOT NULL,
  PRIMARY KEY(id)
) ENGINE=MyISAM AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;

Dumping Data for table topic

INSERT INTO `topic` (`id`, `title`, `content`, `author`, `views`) VALUES
(6, 'How to Install CakePHP', 'How to Install CakePHP..How to Install CakePHP..How to Install CakePHP..How to Install CakePHP..How to Install CakePHP..'),
(5, 'How to Install Laravel', 'How to Install Laravel..How to Install Laravel..How to Install Laravel..How to Install Laravel..How to Install Laravel..'),
(3, 'How to Install windows 7', 'this is How to Install windows 7this is How to Install windows 7this is How to Install windows 7this is How to Install windows 7this is How to Install windows 7'),
(4, 'How to Install windows XP', 'This is how to Install windows xp.This is how to Install windows xp.This is how to Install windows xp.This is how to Install windows xp.This is how to Install windows xp.'),
(2, 'php mysql insert', 'This is php mysql insert tutorials.This is php mysql insert tutorials.This is php mysql insert tutorials.This is php mysql insert tutorials.This is php mysql insert tutorials.'),
(1, 'php mysql connect', 'This is php mysql connect tutorials.This is php mysql connect tutorials.This is php mysql connect tutorials.This is php mysql connect tutorials.This is php mysql connect tutorials.');

Create 4 files named:
1. index.html
2. script.js
3. search.php
4. style.css

1. index.html

<html>
<head>
<title>AJAX Simple Search PHP MySQL Without Page Refresh</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<div id="wrapper">
 <h1>PHP AJAX Live Search</h1>
<form method="POST" action="">
  <span>Search For:</span><br/>
<input type="text" id="term" autocomplete="off"/><br/>

</form>
<div id="success"></div>
</div>

</html>

2. script.js

$(document).ready(function(){
 $("#term").keyup(function(){
  var term=$("#term").val();
 
   $.ajax({
    url:"search.php",
    type:"POST",
    data:{term:term},
    success: function(data){
     $("#success").html(data);
    }
   });
   return false;
 });
});

3. search.php

<?php
    $conn=new mysqli('localhost','root','','codenair');
    $term=mysqli_real_escape_string($conn,$_POST['term']);
 if(empty($_POST['term'])){
  echo '<font style=color:indigo size=5>Please Type any Word</span>';
 }else{
 $result=mysqli_query($conn,"SELECT*FROM topic WHERE title like '%$term%' or content like '%$term%'");
 $row=$result->num_rows;
 if($row==0){
  echo '<font style=color:red size=5>No Result Found</span>';
 }else{
 while($row=$result->fetch_array()){?>
  <div id="content">
       <h3><?php echo $row['title'];?></h3>
    <p><?php echo $row['content'];?></p>
       
     </div>
 
 <?php }} }?>

4. style.css

#wrapper{
 background:#85adad;
 margin:auto;
 width:600px;
 border-radius:4px;
 min-height:300px;
 max-height:600px;
}
#content{
 width:500px;
 background:#ccc;
}
#form{
 background:#ddd;
 width:500px;
 margin:auto;
}
h3{
 background:black;
 color:white;
}
input[type=text]{
 padding:8px;
 border-radius:4px;
 width:250px;
 font-size:20px;
}

That's it how to create PHP AJAX Live Search ..Stay with us for more codes.. Thank You..
also Learn
1. Live Username Availability Check in PHP Jquery AJAX..
2. Upload and Display Image without Page refresh using php,jquery,AJAX
3. Upload Image Without Page Refresh in PHP,AJAX
4. Get Data From Database PHP AJAX

Latest

Saturday, February 17, 2018

PHP AJAX Live Search