Bootstrap Autocomplete with Dynamic Data Load using PHP Ajax
by Vincy. Last modified on July 5th, 2023.
In this tutorial, we will see how to load data for an autocomplete suggestion list dynamically, Bootstrap Typeahead input field. I use jQuery AJAX to call the PHP MySQL script to read the data from the database and autocomplete it dynamically.
The loaded data will be returned to the source of the Typeahead script to list the autocomplete suggestions.
In a previous tutorial, we implemented the Bootstrap autocomplete with local array data. In this example, it stores countries in a database table instead of a Javascript array. The source of the typeahead function is read and supplied from the database using jQuery AJAX.
I used AJAX to execute the PHP script by passing the Typeahead field input as the query parameter to process the SELECT to get data for the autocomplete suggestion.
jQuery AJAX Callback to Supply Typeahead Source
The following jQuery script initializes the Bootstrap Typeahead function to implement autocomplete for an input field. While typing data into the input field, the value is sent to the PHP script as the query parameter using the jQuery AJAX POST method.
This method received the database response in a JSON format and was used as the source for showing autocomplete suggestions.
The JSON data is received and parsed in the AJAX callback by setting the property like dataType: JSON. If you want to see how to handle JSON data with PHP, the linked tutorial has a complete guide.
$(document).ready(function() {
$('#txtCountry').typeahead({
source: function(query, result) {
$.ajax({
url: "server.php",
data: 'query=' + query,
dataType: "json",
type: "POST",
success: function(data) {
result($.map(data, function(item) {
return item;
}));
}
});
}
});
});
Dynamic Autocomplete using Database
The following PHP script receives the Typeahead input as the SELECT query parameter. This will be bound to the query statement to get the related country name that starts with the query string. This data will be encoded in JSON format and returned to the Typehead source attribute.
<?php
$keyword = strval($_POST['query']);
$search_param = "{$keyword}%";
$conn = new mysqli('localhost', 'root', '', 'blog_samples');
$sql = $conn->prepare("SELECT * FROM tbl_country WHERE country_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["country_name"];
}
echo json_encode($countryResult);
}
$conn->close();
?>
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.