PHP Ajax Auto Search

PHP Ajax Auto Search

PHP Ajax Auto Search : --

This post have live auto search using ajax request to server ,this is usable for where you want filter product with suggestion using this source code and save your time for implementing auto search in your project .

it have two page index.php and ajax.php working of index.php is have a  user interface and ajax request to ajax.php which fetch data releted to search and response desired result.

setup database table create database phpcooker and import sql data


--
-- Database: `phpcooker_script`
--

-- --------------------------------------------------------

--
-- Table structure for table `autosearch`
--

CREATE TABLE IF NOT EXISTS `autosearch` (
  `autosearch_id` int(20) NOT NULL AUTO_INCREMENT,
  `autosearch_name` varchar(150) NOT NULL,
  `autosearch_image` varchar(100) NOT NULL,
  `autosearch_status` enum('0','1') NOT NULL DEFAULT '1' COMMENT '0-active,1-inactive',
  PRIMARY KEY (`autosearch_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=15 ;

--
-- Dumping data for table `autosearch`
--

INSERT INTO `autosearch` (`autosearch_id`, `autosearch_name`, `autosearch_image`, `autosearch_status`) VALUES
(1, 'Previous page\n\n    Apple MacBook Air MQD32HN/A 13.3-inch... ', 'apple.jpg', '1'),
(2, 'Lenovo Ideapad 320E 80XH01GKIN 15.6...', 'lenevo.jpg', '1'),
(3, ' Dell Vostro 3468 14-inch Laptop (7th Gen Core i3 - 7100U/4GB/1TB/Ubuntu 14.04/Integrated Graphics)\nDell Vostro 3468 14-inch Laptop ', 'delbostro.jpg', '1'),
(4, 'RDP ThinBook - 11.6 inch Laptop', 'rdp.jpg', '1'),
(5, 'Lenovo Ideapad 320E 80XH01FHIN 15.6...', 'lenevo2.jpg', '1'),
(6, ' HP 15-be016TU 15.6-inch Laptop... ', 'hp.jpg', '1'),
(7, 'Lenovo ideapad110 80UD00RYIH 15.6...', 'lenevo6.jpg', '1'),
(8, 'Dell Vostro 3468 14-inch Laptop..', 'dell2.jpg', '1'),
(9, 'Acer Switch 10E SW3-016 10.1-inch..', 'acer.jpg', '1'),
(10, 'HP 15-BE009TU 15.6-inch Laptop...', 'hp-1.jpg', '1'),
(11, 'iBall Exemplaire CompBook 14-inch Laptop', 'iball.jpg', '1'),
(12, 'Lenovo 110 -15ACL 15.6-inch Laptop...', 'lenevo-320e.jpg', '1'),
(13, 'iBall CompBook Excelance-OHD', 'iball.jpg', '1'),
(14, 'Lenovo Ideapad 310 80TU00D2IH 14-inch...', '41CFOVzhJ3L._SL150_.jpg', '1');


index.php


<!DOCTYPE html>
<html lang="en">
<head>
  <title>PHP Ajax Auto Search</title>
  <link rel="stylesheet" href="pagination.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>PHP Ajax Auto Search</h1>
 
 <br />  <br />
 

         <form class="form-horizontal" method="post" enctype="multipart/form-data" >
    
    <div class="form-group has-success has-feedback">
      <label class="col-sm-3 control-label" for="inputSuccess">Search Here....</label>
      <div class="col-sm-4">
        <input type="text" class="form-control" id="inputSuccess" name="name" onkeyup="autosearch(this.value)" >
        <div class="result" style="width:100%;z-index:100;position: relative;">
        
        </div>
      </div>
    </div>
    
    
    
    
     
  </form>

</div>

<script>
function autosearch(name){
    
    $.ajax({
        url:"ajax.php",
        type:'post',
        data:{name:name},
        success:function(result){
            $('.result').html(result);
        }
    });
}

</script>


</body>
</html>

ajax.php


<?php
$conn  = @mysql_connect("localhost","root","");
mysql_select_db("phpcooker_script",$conn);
$name = $_REQUEST['name'];
$query ="select * from autosearch where autosearch_name like '".$name."%'";
    $rs = mysql_query($query,$conn) or die("failed".mysql_error());
    while($data = mysql_fetch_assoc($rs)){
?>
        <div style="border-bottom: dashed aqua;width:100%;height:100px;" >
                <a href="javascript:void(0)" ><div style="width:20%; float:left"><img src="image/<?php echo $data['autosearch_image']; ?>" width="80px;" ></div><div style="width:80%;"><p><?php echo $data['autosearch_name']; ?></p></div>
                </a>
        </div>
<?php } ?>

Download full code from blow donload button :----

                       smileysmileysmileysmiley

 

Demo

Download Hare

Total Coments (0)