Ajax Auto Suggest Help of PHP,HTML and CSS

ajax auto suggest

Hi Guys Today We will learn how to Create Dynamic Ajax Auto Suggest Menu help of MySQL Database.

What you will need..

First create a database named: test
create table named: company
Now use The below SQL Commands to Create a table(Company) and Insert some Company name:
SQL for Creating Table company

CREATE TABLE IF NOT EXISTS `company` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL,
   PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=32 DEFAULT CHARSET=latin1;

SQL fro Inserting Company Name

INSERT INTO `company` (`id`, `name`) VALUES
(3, 'Alphabet Inc'),
(4, 'Bharathi Airtel'),
(5, 'Bally Technology Inc'),
(6, 'Bank Of America'),
(7, 'Bank of India'),
(8, 'Dell Inc'),
(9, 'Delphi Inc'),
(10, 'Ebay Inc'),
(11, 'EMC Corporation'),
(12, 'Facebook Inc'),
(13, 'FileMaker Inc'),
(14, 'Google Inc'),
(15, 'Alibaba Inc'),
(16, 'IBM'),
(17, 'ASUS Inc'),
(18, 'Samsung Inc'),
(19, 'Nokia Inc'),
(28, 'Tata Nano'),
(29, 'Bajaj Motor'),
(24, 'Holdings Inc'),
(25, 'Baidu Inc'),
(26, 'Airtel Inc'),
(27, 'HAL Inc'),
(30, 'Samsung Shipyard'),
(31, 'Nokia Android');

Files Structure:
1. index.html
2. script.js
3. suggest.php
4. style.css

1.Creating index.html page.

<html>
<head>
<title>AJAX Auto Suggest Using PHP MySQL</title>
<script 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>
<h2>AJAX AutoSuggest Example</h2>
<form method="POST">
<table>
    <tr>
     <td><span>Company Name:</span></td>
  <td><input type="text" id="name" autocomplete="off"/></td>
 </tr>
 <tr>
   <td></td>
   <td><div id="success"></div></td>
 </tr>
</table>
</form>
</html>

2.Creating script.js file
We will call suggest.php page to retrive data from database by passing name without refresing page..

$(document).ready(function(){
 $("#name").keyup(function(){
  var name=$("#name").val();
  $.ajax({
   url:"suggest.php",
   type:"POST",
   data:{name:name},
   success: function(data){
    $("#success").fadeIn();
    $("#success").html(data);
 if(name==''){
  $('#success').fadeOut(200);
 }
   }
  });
  });
  $(document).on('click','li',function(){
    $("#name").val($(this).text());
    $("#success").fadeOut(1000);
  });
});

3.Creating suggest.php file..

<?php
$conn=new mysqli('localhost','root','','test');
if(isset($_POST['name'])){
 $name=$_POST['name'];
$result=mysqli_query($conn,"SELECT*FROM company WHERE name like '%$name%'");
if($result){
 while($row=$result->fetch_array()){
 ?>
 <div class="company"><ul>
<li><?php echo $row['name'];?></li>
</ul>
</div>
<?php
}}else{
 echo "No Data Founds";
}
}
?>

4.Creating style.css file..

span{
 color:green;
 font-size:20px;
 border-bottom:2px solid red;
 font-weight:bold;
 font-style:italic;
}
input[type=text]{
 padding:4px;
 border-radius:4px;
 width:220px;
 font-size:18px;
}
.company{
 background: lightblue; 
 padding: 5px;
 height: auto;
 margin-left: 2px;
 width:160px;
}
.company ul{
 margin: 0;
 padding: 0;
 list-style: none;
 cursor: pointer;
}

That's all, this is how to create dynamic auto suggest menu using Ajax, PHP and MySQL. You can customize this codes further as per your requirement. feel free to give your comment on this tutorial.

Latest

Monday, December 18, 2017

Ajax Auto Suggest Help of PHP,HTML and CSS