Using typeahead in Bootstrap

Question

Im new to bootstrap. I want to use the built-in bootstrap-typeahead.js file for my web application to automatically display the options as the user types into the textbox. I've downloaded the sample code that uses typeahead plugin. It works ok just setting the data to be static. But I want all the data to be dynamically fetch from my database of the table named 'payees' as shown below :

Table: payees
+----------+--------------+---------------+
| payee_id | payee_name   | payee_contact |
+----------+--------------+---------------+
|        1 | John Smith   | 09045544211   |
|        2 | Chen Lou     | 09093457851   |
+----------+--------------+---------------+

I want to display the lists of payee_name from the textbox as the user type using typahead. I've followed some of the tutorials from the net on how to fetch the data from the database using jquery ajax. As of now, I've been trying to display the data from my database using this two files named autocomplete.php and data.php

and heres my code I've been working on :

autocomplete.php

<input type="text" class="typeahead" data-provide="typeahead" autocomplete="off" />

<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>`
<script src="js/bootstrap-typeahead.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('input.typeahead').typeahead({
        source: function (query, process) {
        $.ajax({
            url: 'data.php',
            type: 'POST',
            dataType: 'JSON',
            data: 'query=' + query,
            success: function(data) {
                console.log(data);
                process(data);
            }
        });
        }
    });
});
</script>

data.php

<?php

$mysqli = new mysqli("localhost", "root", "", "disbursements");

$query = 'SELECT payee_name FROM payees';

if(isset($_POST['query'])){

// Now set the WHERE clause with LIKE query
$query .= ' WHERE payee_name LIKE "%'.$_POST['query'].'%"';
}

$return = array();

if($result = $mysqli->query($query)){
// fetch object array
   while($obj = $result->fetch_object()) {
      $return[] = $obj->payee_name;
   }
   // free result set
   $result->close();
}

// close connection
$mysqli->close();

$json = json_encode($return);
print_r($json);
?>

But that codes doesn't work as it seems like that my php script is not returning any data to display in my textbox. Can someone help me with what is wrong with my codes? thanks

Answer 1

Try this:

$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('data.php', { query: query }, function (data) {
            return process(data.options);
        });
    }
});



<?php
    $mysqli = new mysqli("localhost", "root", "", "disbursements");
    $query = 'SELECT payee_name FROM payees';

    if (isset($_POST['query'])) {
        // Now set the WHERE clause with LIKE query
        $query.= ' WHERE payee_name LIKE "%' . $_POST['query'] . '%"';
    }

    $return = array();

    if ($result = $mysqli->query($query)) {
        // fetch object array        
        while ($obj = $result->fetch_object()) {
            $return['options'][] = $obj->payee_name;
        }       
        // free result set        
        $result->close();
    }

    // close connection        
    $mysqli->close();
    $json = json_encode($return);
    echo $json;
?>