CODEWITHSUNDEEP
javascripttypeahead
Magnotta
Magnotta

Reputation: 941

bootstrap typeahead is not fetching results

i am trying to autocomplete using bootstrap typeahead but its not fetching results. i tried many times using jquery,ajax

index.php 

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="typeahead.js"></script>
<script>
  $(function() {
    $('#typeahead').typeahead({
            source:function(typeahead,query)
            {
              $.ajax({
                url :'mysql.php',
                type :'POST',
                data :'query=' + query,
                dataType :'json',
                async :false,
                success:function(data)
                {
                  typeahead.process(data);
                }
              });
            }

        });

  });
 </script>
</head>
 <body>
  <input type="text" name="term" id="typeahead" class="form-control" size="50" placeholder="Search" >
 </body>
  </html>

mysql.php  
<?php
$conn = mysqli_connect('localhost', 'root','','mydb');
if (!$conn) {
  die("Connection failed: " . mysqli_connect_error());
}

$searchTerm = $_POST['query'];
$query = mysqli_query($conn,"SELECT * FROM content_ref_table WHERE title LIKE '%{$searchTerm}%' ORDER BY title ASC");
 while ($row = mysqli_fetch_assoc($query)) {
   $data[] = $row['title'];
  }
  echo json_encode($data);
   ?>

i am using typeahead along with ajax call,but its not giving results

Upvotes: 0

Views: 152

Answers (1)

davidkonrad
davidkonrad

Reputation: 85528

I believe you are using bootstrap3-typeahead / or another bootstrap 2.x typeahead deriviation? If so, you have messed up the arguments for the source method - it should be process, query where process is the async callback. Your code could be reduced to 

$('#typeahead').typeahead({
  source: function(query, process) {
    var url = 'mysql.php?query=' + query
    return $.get(url, {}, function(data) {
      return process(data)
    })
  }
})

Upvotes: 1

Related Questions