how to autocomplete bootstrap php mysql ajax from database

Question

autocomplete not working i want fetch data from mysql database like google option my file not working not showing any thing when we key down select data from sugested option

please sugest some good code my code is not running it is not working now sir and auto select is not showing similar answer this is link where showing but not selecting any data under key selection this is link where show nothing

     <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <!--my file not working auto complete address from database-->
    <!--code inclide file of botstarp -->
<script        
   src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
        <!--code of auto fetch-->
      <script>
     $(document).ready(function () {
       $('#Country').typeahead({
        source: function (query, result) {
            $.ajax({
                url:"autoselect_jquery5.php",
                data:'query=' + query,            
                dataType:"json",
                type:"POST",
                success: function (data) {
                    result($.map(data, function (item) {
                        return item;
                    }));
                }
            });
           }
        });
     });
      </script>
       </head>


       <body>
       div class="container" style="width:600px;">
      <h2 align="center">Autocomplete Textbox using Bootstrap Typeahead with Ajax PHP</h2>

                 <label>Search Country</label>
       <input type="text"name="country"id="country"autocomplete="off"placeholder="Country" />
     </div>
 </body>
   <   /html> 

       <!--second file which fetching data from from database -->
     // autoselect_jquery5.php file for fetch code
       <?php
     include 'database.php';

     if (isset($_POST['query'])) {
     $search_query = $_POST['query'];


      $query = "SELECT * FROM transporter WHERE address LIKE 
  '%".$search_query."%' LIMIT 12";
   $result = mysqli_query($link, $query);
  $data = array();

    if(mysqli_num_rows($result) > 0)
   {
    while($row = mysqli_fetch_assoc($result))
     {
        $data[] = $row["address"];
     }
      echo json_encode($data);
          }
      }
       ?>




    }

Why are you comparing bootstrap and jquery? Both are completely different things. — AVX-42, May 05 '19 at 05:33
thanks sir please suggest me how to run code it is not working — vishal sharma, May 05 '19 at 05:50

score 0 · Answer 1 · answered May 05 '19 at 06:14

0

for autocomplete, you can use typehead.js its works with the bootstrap check below ex.

How do we set remote in Typeahead.js?

answered May 05 '19 at 06:14

Nagender

47
1
2
6

score 0 · Answer 2 · answered May 05 '19 at 06:52

You have some wrongs, I explain you in the comments in your code.

I hope that I can help you. I copied your code and I fixed it.

It is working now. Try it and comment me.

Steps:

1) Import the database file (on your local server).

Link database: https://drive.google.com/drive/u/1/folders/1JhXXPQ4QHsHssTbpdnhL_cBOrnK7Q3nB

2) Copy in a folder of local server the file autocomplete.html.

   <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <!--my file not working auto complete address from database-->
    <!--code inclide file of botstarp -->
<script        
   src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
        <!--code of auto fetch-->
      <script>
     $(document).ready(function () {
       $('#country').typeahead({ // Your #Country ID is different that you using in input 
        // #Country <> 
        source: function (query, result) {
            $.ajax({
                url:"database.php",
                data:'query=' + query,            
                dataType:"json",
                type:"POST",
                success: function (data) {
                    result($.map(data, function (item) {
                        return item;
                    }));
                }
            });
           }
        });
     });
      </script>
       </head>


       <body>
       <div class="container" style="width:600px;">
      <h2 align="center">Autocomplete Textbox using Bootstrap Typeahead with Ajax PHP</h2>

                 <label>Search Country</label>
       <input type="text"name="country"id="country"autocomplete="off"placeholder="Country" />
     </div>
 </body>
</html>

3) Copy in same folder the php code.

<?php  
 
 $host = 'localhost'; //This is your host, if you working locally your host will be localhost
 $user = 'root'; //The name of the your user in localhost server
 $pass = 'root'; //The password of the your user in localhost server
 $db_name = 'countries'; //The name of the database that you using

 $keyword = strval($_POST['query']); // 
 $search_param = "{$keyword}%";
 $conn =new mysqli($host, $user, $pass, $db_name);

 $sql = $conn->prepare("SELECT * FROM country WHERE name LIKE ?");
 $sql->bind_param("s",$search_param);   
 $sql->execute();
 $result = $sql->get_result();
 if ($result->num_rows > 0) {
  while($row = $result->fetch_assoc()) {
  $countryResult[] = $row["name"];
  }
  echo json_encode($countryResult);
 }
 $conn->close();
?>

4) It's over.

how to autocomplete bootstrap php mysql ajax from database

2 Answers2