To implement auto-complete search functionality using jQuery, you can follow these steps:
Step 1: Include jQuery and the jQuery UI library in your HTML file.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/smoothness/jquery-ui.css">
Step 2: Create an HTML input field for the search box.
<input type="text" id="search-box" placeholder="Type to search...">
Step 3: Initialize the auto-complete functionality using jQuery UI's autocomplete() method.
$(document).ready(function() {
// Define an array of suggested search terms
var searchTerms = ["apple", "banana", "cherry", "date", "elderberry"];
// Initialize autocomplete on the search box element
$("#search-box").autocomplete({
source: searchTerms,
minLength: 1 // Minimum characters to trigger the auto-complete suggestion
});
});
In the above code, we define an array of suggested search terms (searchTerms). The autocomplete() method is called on the search box element $("#search-box"), providing the source option as the array of search terms. We also set the minLength option to 1, meaning auto-complete suggestions will be shown after typing at least one character in the search box.
That's it! Now, when a user starts typing in the search box, jQuery UI's auto-complete feature will automatically show a list of matching suggestions based on the provided search terms.