jquery自动完成，如何在焦点上显示所有选项？答案

【问题标题】：jquery autocomplete, how to show all options on focous?jquery自动完成，如何在焦点上显示所有选项？
【发布时间】：2016-07-20 17:30:46
【问题描述】：

我有下面的自动完成代码，当我输入一个或多个字母时效果很好。

$("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({ 被执行。知道为什么在专注于输入字段时自动完成不起作用吗？

【问题讨论】：

一步一步来，而不是用焦点事件替换keyup代码，首先尝试检查焦点事件是否适合您。所以尝试一些 $("body").on('focus', 'input.sub-category', function () { alert('focused'); } 然后如果它有效，那么继续在里面编写更多代码
看起来问题在于您将输入绑定在焦点上。所以元素会有焦点，所以它不会被触发。也许如果你这样做$(this).autocomplete({...your options...}.trigger("focus");

标签： javascript jquery autocomplete

【解决方案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");
            }
        }
    });
});
});

如果这不起作用，请在评论中添加状态。

【讨论】：

现在试试我忘了在最后添加')'并保持上面的代码不变..
最后一次尝试在我的代码中调用 keyup 而不是 keydown 否则我们会寻找其他选项 bcz 它在我的工作正常..
控件将在焦点上使用 keyup 功能，但对 ajax 的校准在焦点上不起作用。这就是下拉列表中没有数据的原因。
它在哪里中断？？
我刚刚编辑了我的问题，您现在可以检查一下吗？

【解决方案2】：

我能够通过添加一个更多的功能来修复。所以有一个函数在 keyup 上执行，另一个在 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");
                }
            }
        });
    });

上面一个在 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", "");
});

【讨论】：