Last Updated: 17th September 2025
In this article, you'll learn how to create a sleek and responsive autocomplete dropdown that appears as soon as the textbox gains focus, using jQuery's built-in autocomplete() function.Why This Technique Matters?
This approach is especially useful when you want to improve user experience by offering suggestions before they start typing. It reduces friction, speeds up data entry, and helps users discover available options more intuitively, perfect for short lists like country names, categories, or tags.
👉 In one of my earlier articles, I demonstrated how to use jQuery's autocomplete() method in combination with Ajax to fetch suggestions dynamically from a remote database table. If you're working with large datasets or need real-time search capabilities, that example is a must-see. It shows how to seamlessly connect your frontend to a backend source, making your autocomplete feature both scalable and efficient.
I have explained the script below (after the code).
<html>
<head>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
.ui-autocomplete {
cursor:pointer;
height:120px;
overflow-y:scroll;
}
</style>
</head>
<body>
<label>List of countries: </label>
<input type="text" id="tbCountries" placeholder="Start typing..."
aria-label="Country autocomplete" />
</body>
<script>
$(document).ready(function() {
const countries = [
'Argentina', 'Australia', 'Brazil', 'Belarus', 'Bhutan',
'Chile', 'Cambodia', 'Canada', 'Denmark', 'Dominica', 'India', 'United States'];
$('#tbCountries').autocomplete({
source: countries,
minLength: 0,
scroll: true
}).on('focus', function () {
$(this).autocomplete('search', '');
});
});
</script>
</html>The AutoComplete() function is attached with the textbox control and when the focus is on the textbox, it triggers the focus event, which shows a dropdown list all the values in the array.
🚀 If you want, you can highlight the input word or text in the AutoComplete search box.
Few things we need understand in the script
Normally, autocomplete searches are triggered only after the user enters a minimum number of characters into the textbox. However, in the script above, I've set minLength to 0, which means the dropdown is activated immediately when the textbox gains focus, without requiring any input. Since no characters are needed to initiate the search, jQuery simply displays all available options from the local data source (such as an array), making it ideal for short, predefined lists.
minLength: 0
💡 Why Use an Array as a Local Data Source?
1. Fast and lightweight: No need for server calls and data is instantly available for testing.
2. Ideal for small, static lists: Perfect for things like country names, categories, tags, or predefined options.
3. Easy to implement: Just pass the array directly to the source parameter.
In the above example, the array countries acts as the "local data source".
The jQuery focus event is tied to the autocomplete() function, and when triggered, it calls the "search" method. This method pulls data from the local source, in this case, a predefined array. Because no specific search term is passed, jQuery simply displays the entire list of options as soon as the textbox gains focus. This technique is especially useful for short, static datasets where showing all available choices upfront enhances usability and speeds up selection.
$(this).autocomplete('search', '');
Try changing the above procedure by passing a value with the search method and see how it works.
$(this).autocomplete('search', $(this).val());
There’s no shortage of autocomplete widgets available online today, from advanced libraries like Select2 and Typeahead.js to full-featured UI frameworks like jQuery UI and Bootstrap. However, jQuery's built-in autocomplete() method stands out for its simplicity and ease of integration, especially for lightweight use cases.
Whether you're building a quick form or enhancing a user friendly search experience, this approach offers a clean and effective solution with minimal setup.