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

我能够通过添加一个功能来修复。因此，有一个函数在keyup上执行，另一个函数在焦点上执行。

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

上面一个在keyup上执行，一个在焦点下面执行。

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

jquery autocomplete，如何在focous上显示所有选项？

2 个答案: