Autocomplete from Database

In this tutorial, we will see how to create an autocomplete from a database. We will see how to load data dynamically for an autocomplete suggestion list, Bootstrap Typeahead input field. We will 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 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.

Dynamic Autocomplete from Database

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.

The JSON data is received and parsed in the AJAX callback by setting the property like dataType: JSON.

<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>

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.

Add Autocomplete Search to your website @ 9 USD per month

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