PHP-MySQL Ajax Jquery-UI Autocomplete in Bootstrap Tutorial

This tutorial will show you how to use Jquery UI Autocomplete in Bootsrap via PHP, MySQL and AJAX. You can use it anywhere else too easily.

1. You will learn to make Jquery UI autocomplete working in Bootstrap via PHP, MySQL and Ajax.
2. First create a simple form using below code or you can use your own search code. Please note id of input is searchg which will use later.

• <form  class="navbar-form pull-left">
  <input class="span4" id="searchg" type="text" placeholder="Search">
  <button class="btn" type="button">Search</button>
  </form>
  

3. Now Download JQuery UI from here and unzip it and put it in assets folder of bootstrap or anywhere you want. and put following lines before the </body> tag

• <!--Jquery UI required links-->
  <script src="assets/js/jquery.js"></script>
  <script src="assets/ui/jquery.ui.core.js"></script>
  <script src="assets/ui/jquery.ui.widget.js"></script>
  <script src="assets/ui/jquery.ui.position.js"></script>
  <script src="assets/ui/jquery.ui.autocomplete.js"></script>

4. Now put following Jquery UI css link before the </head> tag.

• <!--Jquery UI css link-->
  <link rel="stylesheet" href="assets/ui/themes/ui-darkness/jquery.ui.all.css">
  

5. Under Jquery UI required links you will write following code for showing autocomplete on input. We will get data from php page Get_Categories.php using JSON and use searchg id.

• <script type="text/javascript">
  $(document).ready(function()
  {
            $.ajax({
                 url: 'Get_Categories.php',
                 type: 'POST',
                 dataType: 'json',
                 success: function(data){
                       $('#searchg').autocomplete(
                       {
                             source: data,
                             minLength: 1   
                       });
                 }
            });  
  });
  </script>

6. Now on Get_Categories.php page you will write following code to get results from database and output JSON String.

• <?php
  /*** mysql hostname ***/
  $hostname = 'localhost';
  /*** mysql username ***/
  $username = 'username';
  /*** mysql password ***/
  $password = 'password';
  // Database Connection
  $dbh = new PDO("mysql:host=$hostname;dbname=mysql", $username, $password);
  // Query to get the usable locations
      $locale = $_GET['term'];
  $sql = "SELECT DISTINCT Category FROM `category` WHERE `Category` LIKE '%$locale%'";
  // Deifne array for products
   $Product_array = array();
     foreach ($dbh->query($sql) as $row)
          {
          $result = $row[0];
     // use arrray_push to store results
    array_push($Product_array, $result);
          }
  // put files in $jason and then echo it for getting in your page using Ajax.        
  $json = json_encode($Product_array);
  echo $json; 
  ?>

7. Below is a code for MySQL Table, you can copy it and paste it in your query window inside database.

• --
  -- Table structure for table `category`
  --
  CREATE TABLE IF NOT EXISTS `category` (
    `SrNo` int(11) NOT NULL AUTO_INCREMENT,
    `Category` varchar(50) NOT NULL,
    `SubCategory` varchar(100) NOT NULL,
    PRIMARY KEY (`SrNo`)
  ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=14 ;
  --
  -- Dumping data for table `category`
  --
  INSERT INTO `category` (`SrNo`, `Category`, `SubCategory`) VALUES
  (1, 'Electronics', 'Mobile'),
  (2, 'Electronics', 'Tablet'),
  (3, 'Electronics', 'IPad'),
  (4, 'Electronics', 'ITab'),
  (5, 'Electronics', 'Television'),
  (6, 'Electronics', 'Camera'),
  (7, 'Electronics', 'Laptop'),
  (8, 'Electronics', 'LCD'),
  (9, 'Electronics', 'Computer'),
  (10, 'Books', 'Magazines'),
  (11, 'Books', 'Journals'),
  (12, 'Books', 'Course Books'),
  (13, 'Garments', 'Kids Clothes');

Above tutorial is very useful for making autocomple function in web pages. You can also use some features of this tutorials. For more information please visit Crewow Website