jQuery自動完成功能，如何在focous上顯示所有選項？

Question

我有下面的自動完成代碼，當我鍵入一個或多個字母時，它可以正常工作。

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

我想用數據庫中所有匹配的單詞填充下拉列表，只關注輸入框。 這意味着即使不輸入任何單詞。 當我只關注焦點時，將調用該函數，但不會執行function $(this).autocomplete({內的任何操作。任何想法，當關注輸入字段時，為什么自動完成不起作用？

Answer 1

使用以下代碼，它將根據您的要求工作。

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

如果這不起作用，請在注釋中添加狀態。

Answer 2

我能夠通過添加更多功能來修復。 因此，有一個功能在鍵盤上執行，而另一個功能在焦點上執行。

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

上面的一個在鍵盤上執行，下面的一個在焦點上執行。

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