jQuery to Show all Autocomplete List or Options on Focus with Example

In this tutorial i am going to explain how to use jQuery to show all autocomplete list or options on focus with example or jQuery autoComplete view all on click or Display jquery ui auto-complete list on focus event or display the autocomplete list triggered by the focus() event or jQuery UI display all autocomplete list / options on focus with example or jQuery open autocomplete menu on focus of textbox with example. In jQuery autocomplete by using focus event we can show all autocomplete options on focus.

To show all autocomplete list or options on focus in textbox using jQuery we need to write the code like as shown below

JavaScript:

<script type="text/javascript">
        $(function () {
            var users = ['Nikunj Satasiya',
            'Hiren Dobariya',
            'Keval Pansara',
            'Vivek Ghadia',
            'shruti Patel',
            'Priyanka Gelani',
            'Krishnamurti Iyer',
            'Mohan Rupala'];
 
            $('#txtUsers').autocomplete({
                source: users,
                minLength: 0
            }).focus(function () {
                $(this).autocomplete("search", "");
            });
        })
    </script>

HTML Code

<html>
<head>
    <title>jQuery Show All AutoComplete Options on Focus Example</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0-rc.2/themes/base/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.11.3.js"></script>
    <script src="//code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var users = ['Nikunj Satasiya',
            'Hiren Dobariya',
            'Keval Pansara',
            'Vivek Ghadia',
            'shruti Patel',
            'Priyanka Gelani',
            'Krishnamurti Iyer',
            'Mohan Rupala'];
 
            $('#txtUsers').autocomplete({
                source: users,
                minLength: 0
            }).focus(function () {
                $(this).autocomplete("search", "");
            });
        })
    </script>
 
</head>
<body>
    <form id="form1">
        <center>
            <div>
                Enter Your  Name:<input type="text" id="txtUsers" placeholder="Focus in Textbox" style="padding:10px; width:250px" />
            </div>
        </center>
    </form>
</body>
</html>

Demo:

About Nikunj Satasiya

I am a passionate programmer and a Software Engineer who love developing applications in Microsoft Technologies, blogging and other related technologies like Asp.Net, VB.Net, SEO, Sql Server,My SQL,Asp.Net-MVC, LINQ, C#.Net, Stored Procedures, Ajax, JavaScript, JQuery, xml etc.

Project Plazza