Tuesday, March 28, 2017

How to make a autocomplete using jquery and php pdo with parsing json data from mysql


Here is the video tutorial for easy understanding


create mysql database autocomplete and create table autocomplete

Table structure:

id int value=12 , primary key autoincrement
title varchar=255 ,

 

json.php file


  1. <html>

  2. <head></he

  3. <html>

  4. <head>

  5. <title>tutu</title>
  6. <link rel="stylesheet" href="js/easy-autocomplete.min.css"/>

  7. <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

  8. <script type="text/javascript" src="js/jquery.easy-autocomplete.min.js"></script>

  9. </head>

  10. <body>

  11. <h1>Auto complete plugin with php pdo and jquery</h1> 
  12. <input id="provider-json" />

  13. <script type="text/javascript">

  14.     var options = {
  15.     url: "json.php",
  16.     getValue: "jsondata",

  17.     list: {

  18.         match: {

  19.             enabled: true

  20.         }

  21.     }
  22. };

  23. $("#provider-json").easyAutocomplete(options);

  24. </script>

  25. </body
  26. </html>

json.php file



  1. <?php

  2.  

  3.  $dbhost = "localhost";

  4.  $dbuser = "root";

  5.  $dbpass = "";

  6.  $dbname = "autocomplete";

  7.  

  8.  try{

  9.   

  10.   $dbcon = new PDO("mysql:host=$dbhost;dbname=$dbname",$dbuser,$dbpass);

  11.   $dbcon->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  12.   

  13.  }catch(PDOException $ex){

  14.   

  15.   die($ex->getMessage());

  16.  }
  17.  $sqlquery = "select * from autocomplete";

  18. $run = $dbcon->prepare($sqlquery);
  19. $run->execute();
  20. $out = array();

  21. while($row=$run->fetch(PDO::FETCH_ASSOC)) {

  22.     $out[]= array('jsondata'=>$row['title']);

  23. }

  24. echo json_encode($out);

  25. ?>

No comments:

Post a Comment