Bootstrap Autocomplete with Dynamic Data Load using PHP Ajax

In this tutorial, we are going to see how to load data dynamically for an autocomplete suggestion list, Bootstrap Typeahead input field. I use jQuery AJAX to call the PHP MySQL script to read the data from the database and autocomplete dynamically. The loaded data will be returned to the source of the Typeahead script to list the autocomplete suggestions.

In a previous tutorial, we have 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 by using jQuery AJAX. I used AJAX to execute PHP script by passing the Typeahead field input as the query parameter to process the SELECT to get data for the autocomplete suggestion.

View Demo

load-dynamic-data-using-bootstrap-ajax-autocomplete

jQuery AJAX Callback to Supply Typeahead Source

The following jQuery script is used to initialize the Bootstrap Typeahead function to implement autocomplete for an input field. While typing data to the input field, the value is sent to the PHP script as the query parameter using jQuery AJAX POST method. This method received the database response in a JSON format and used as the source for showing autocomplete suggestions.

<script>
    $(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;
                        }));
                    }
                });
            }
        });
    });
</script>

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 return 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();
?>

View DemoDownload

This jQuery code tutorial was published on April 14, 2017.

↑ Back to Top