Display AutoComplete Drop down List on Focus using jQuery

Triggering an AutoComplete function to show a dropdown list using jQuery focus event is simple. This feature becomes a necessity when you come across a situation where users do not have a clear idea about what they are looking for in the AutoComplete box.

Instead of using a Wildcard character to search, they expect us to display a list with all the details to choose. So when the focus is set on a textbox (input control), a list of predefined values is displayed without even typing a single character.

See this demo

Despite the fact that the purpose of an AutoComplete function is to search data based on characters, to make the search quick and easy, this might also be very useful.

Saying this, we need to make sure that the list showing values should not be very lengthy. If you are fetching data from a database table with many rows, cut it short by extracting the Top 10 or 20 values, so that the user does not have to scroll it down to look for the words.

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

<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>
        p, div, input {
            font: 16px Calibri;
        }
        .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 show a drop down list all the values in the array.

If you want, you can highlight the input word or text in the AutoComplete search box.

There are few things we need understand from the above 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 reacts.

$(this).autocomplete("search", $(this).val());

See this demo

Conclusion

I hope you find this article with the demo, interesting. In addition, please don’t forget to share it with your friends. If you have any suggestions or comment, scroll down and leave a message.

← PreviousNext →