how to display jQuery ui auto-complete list on focus event

Jquery autocomplete work

ing well with key event. But it will be good if the user click on text field and it will show the list without typing.

For this, I have added the small part of code like this.

.focus(function () {

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

full example

$(function()

    {

$("#state_name").autocomplete({

            minLength: 0,

            delay : 100,

            source: function(request, response) { 

                jQuery.ajax({

                   url:      "<?php echo $url; ?>admin/auto-coplete-search-state.php",

                   headers: {

        

        'Content-Type':'application/x-www-form-urlencoded'

    },

                   data:    {

                                statename : request.term, cd: $("#country_id").val()

                                //alert(aa)

                            },

                   dataType: "json",

                   success: function(data)

                   {

                        response(data);

                    }   

                })

            },

            select:  function(e, ui)

            {

                var stateId = ui.item.id;

                $("#state_id").val(stateId);

                //alert($("#country_id").val());

            }

        }).focus(function () {

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

        });

});

======================

refrence example

This directly call search method with default value when focus.

Jsfiddle

Stack Overflow

$("input").autocomplete({

    source: ["Apple", "Boy", "Cat"],

    minLength: 0,

}).focus(function () {

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

});