May 09, 2024 | PHP jQuery Bootstrap HTML
Hello Dev,
In this tutorial, I'll illustrate how to implement dynamic autocomplete functionality using the Typeahead.js plugin. I'll provide a comprehensive example that you can easily integrate into your project. Running this example will allow you to observe the output as previewed below:
By following this example, you'll be able to seamlessly incorporate dynamic autocomplete functionality into your project using Typeahead.js.
Read Also: Bootstrap Show Hide Password Source Code ExampleTo add dynamic autocomplete functionality using Bootstrap Typeahead, you'll need to follow these steps. This guide will walk you through creating a simple example that demonstrates how to use AJAX to fetch data for the autocomplete feature.
Step 1: Create the HTML LayoutCreate a file named ajax.html and add the following code. This code includes jQuery, Bootstrap, and the Bootstrap Typeahead library. It also sets up a basic HTML structure with an input field for the autocomplete feature.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Autocomplete with Typeahead</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-typeahead/4.0.2/typeahead.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dynamic Autocomplete</h2>
<div class="input-group">
<input type="text" class="form-control" id="autocomplete" placeholder="Type here...">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#autocomplete').typeahead({
source: function(query, process) {
$.ajax({
url: 'search.php',
type: 'GET',
data: {query: query},
success: function(data) {
process(data);
}
});
}
});
});
</script>
</body>
</html>
Read Also: Animated Typewriter Effect for Your Text HTML Jquery Example Tutorial
Step 2: Create the Server-Side Script
Next, you need to create a server-side script (search.php) that will handle the AJAX request and return the data for the autocomplete feature. This script should query your database or another data source based on the search query and return the results in JSON format.
Here's a basic example of what search.php might look like:
<?php
// Database connection details
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: ". $conn->connect_error);
}
$searchTerm = $_GET['query'];
$sql = "SELECT column_name FROM table_name WHERE column_name LIKE '%$searchTerm%'";
$result = $conn->query($sql);
$data = array();
while($row = $result->fetch_assoc()) {
$data[] = $row['column_name'];
}
echo json_encode($data);
$conn->close();
?>
Replace "localhost", "username", "password", "myDB", "column_name", and "table_name" with your actual database connection details and the specific column and table names you're querying.
Step 3: Run Your ExampleSave both ajax.html and search.php in the same directory. Open ajax.html in your web browser. As you type in the input field, you should see dynamic autocomplete suggestions based on the data returned by search.php.
This example demonstrates a basic implementation of dynamic autocomplete using Bootstrap Typeahead and AJAX. You can further customize the appearance and behavior of the autocomplete feature by exploring the options available in the Bootstrap Typeahead documentation.
Output:
Thank you for your encouragement! If you have any questions or need further assistance, feel free to ask. I'm here to help!
"Hey there! I'm a full-stack developer and proud owner of ItErrorSolution.com, based right here in India. I love nothing more than sharing handy tips and tricks with my fellow developers through easy-to-follow tutorials. When it comes to coding, I'm all about PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, CodeIgniter, and Bootstrap – been hooked on them forever! I'm all about putting in the work and staying committed. Ready to join me on this journey to coding?"