jquery autocomplete, how to show all options on focous?

Question

I have below autocomplete code, which works fine When i type one or more letters.

$("body").on('focus', 'input.sub-category', function () {
    var id = $(this).data('thiscatid');
    var term = $(this).val();
    $(this).autocomplete({
        minLength: 0,
        source: function( request, response ) {
            $.post( base_url + 'ajax/getSubCats', 
                    { parent_id: id, term: term}, 
                    function( data ) {
                        response(data);
                    },
                    'json'
            );
        },
        select:function(event,ui){
            $(".sub-cat").val(ui.item.label); 
            return false;
        },
        change: function(event, ui) {
            console.log(this.value);
            if (ui.item == null) {
                this.setCustomValidity("You must select a category");
            }
        }
    });
});

I would like to populate the drop down with all of the matching words from the database on just focusing the input box. That means even without typing a single word. When i just focus, the function is called, but nothing within the function $(this).autocomplete({ is executed. Any idea why autocomplete not working when focus in on the input field?

Answer 1

Use below code it will work as per your requirement.

$("body input.sub-category").each(function{
$(this).on('focus', 'input.sub-category', function () {
    var id = $(this).data('thiscatid');
    var term = $(this).val();
    $(this).autocomplete({
        minLength: 0,
        source: function( request, response ) {
            $.post( base_url + 'ajax/getSubCats', 
                    { parent_id: id, term: term}, 
                    function( data ) {
                        response(data);
                    },
                    'json'
            );
        },
        select:function(event,ui){
            $(".sub-cat").val(ui.item.label); 
            return false;
        },
        change: function(event, ui) {
            console.log(this.value);
            if (ui.item == null) {
                this.setCustomValidity("You must select a category");
            }
        }
    });
});
});

If this is not work add status in comment.

Answer 2

I was able to fix by adding one more function. So there is one function executing on keyup and another one on focus.

$("body").on('keyup', 'input.sub-category', function () {
        var id = $(this).data('thiscatid');
        var term = $(this).val()?$(this).val():"";
        $(this).autocomplete({
            minLength: 0,
            autoFocus: true,
            source: function( request, response ) {
                $.post( base_url + 'ajax/getSubCats', 
                        { parent_id: id, term: term}, 
                        function( data ) {
                            response(data);
                        },
                        'json'
                );
            },
            select:function(event,ui){
                $(this).val(ui.item.label); 
                return false;
            },
            change: function(event, ui) {
                if (ui.item == null) {
                    this.setCustomValidity("You must select a category");
                }
            }
        });
    });

Above one executes on keyup and below one on focus.

$("body").on('focus', 'input.sub-category', function () {
    var id = $(this).data('thiscatid');
    var term = $(this).val()?$(this).val():"";
    $(this).autocomplete({
        minLength: 0,
        autoFocus: true,
        source: function( request, response ) {
            $.post( base_url + 'ajax/getSubCats', 
                    { parent_id: id, term: term}, 
                    function( data ) {
                        response(data);
                    },
                    'json'
            );
        },
        select:function(event,ui){
            $(this).val(ui.item.label); 
            return false;
        },
        change: function(event, ui) {
            if (ui.item == null) {
                this.setCustomValidity("You must select a category");
            }
        }
    });
    $(this).autocomplete("search", "");
});