Display AutoComplete Drop down List on Focus using jQuery

Last updated: 06th December 2024

In this article I am going to show you how to make a simple AutoComplete dropdown list on focus (when focus is set on the textbox) using jQuery's built-in function called autocomplete.

See this demo

👉 In one of my previous articles, I have explained with an example on how to use jQuery autocomplete() method with Ajax and how to connect a remote database table to fetch values.

The Markup and the Script

Note: I have explained the script below (after the code).

<html>
<head>
    <!--Updated: Added new version of jQueryUI CDN.-->
    <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>
    <p>Setting focus in the below box will automatically show the dropdown list. <br /> 
        Start type in the value to search for values!</p>

    <div>
        <input type="text" id="tbCountries" />
    </div>
</body>

<script>
    $(document).ready(function() {
        BindControls();
    });

    function BindControls() {
        var Countries = ['ARGENTINA', 
            'AUSTRALIA', 
            'BRAZIL', 
            'BELARUS', 
            'BHUTAN',
            'CHILE', 
            'CAMBODIA', 
            'CANADA', 
            'DENMARK', 
            'DOMINICA',
            'INDIA'];

        $('#tbCountries').autocomplete({
            source: Countries,
            minLength: 0,
            scroll: true
        }).focus(function() {
            $(this).autocomplete("search", "");
        });
    }
</script>
</html>

Try it

🚀 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

Typically, a search is initialized when a minimum set of characters are entered in the textbox. However, in the above script we have set the value for minLength as zero. Since the minimum character is set as zero, it does not have to do any specific search in the local data source.

minLength: 0

The jQuery focus event is attached with the AutoComplete() function. This calls a "search" method that fetches data from the local data source (the array is the local data). Since we are not passing any value with the search method, it will show the entire list when a user sets focus on the textbox.

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

See this demo

Conclusion

There are many AutoComplete widgets on the internet today. However, this jQuery feature is easy to use. Let me know how it worked for you.

➡️ More autocomplete examples

← PreviousNext →