javascript - 自动完成不会在第一次输入时触发

Question

所以我用谷歌搜索，在这里搜索，到处都找不到答案。我正在使用 jQuery UI 自动完成功能来搜索项目 ID 编号列表。它们可以是 1 - 99999 之间的任意长度。

问题:

例如，当我键入“2”时，没有任何反应，然后我按下退格键并再次键入“2”，这一次，以 2 开头的任何内容都会出现在下方，并且该事件会显示在开发人员工具的“网络列表”中.此外，当我搜索 1 时，只显示 1，但它没有执行搜索，它只是吐回输入值。但是当我按下退格键并再次输入 1 时，搜索将触发，我得到的结果与输入 2 时的结果相同。通常，无论我输入什么数字，它都应该默认触发，不是吗？我该如何纠正这个问题并让我的自动完成功能正常工作。

代码:

    $('.item-inventory').on('keyup', '#item_num', function(){
        //var search = $(this);
        var itemname;
        var itemprice;
        var itemdesc;
        $(this).autocomplete({
            delay : 100,
            source: function(request, response){
                $.ajax({
                    url: '../assets/server/orders/item_search.php',
                    dataType: 'JSON',
                    data: {search: request.term},
                    success: function (data){
                        var keys = data.search;
                    //  $('#item-name').val(data.search[0].item);
                    //  itemPrice = data.search[0].price;
                    //  itemDesc = data.search[0].desc;
                        response($.map( keys, function(i){
                            return{
                                label : i.id
                            };

                        }));

                    }
                });
            },
            minLength : 1
        });
        //$('#item-search-results').removeClass('hidden');
        $(this).on('autocompleteselect', function(event, ui){
            $('#item-search-results').removeClass('hidden');
        });
    });

Answer 1

基本上，您是在第一次按键后连接自动完成功能(对于第一次按键来说为时已晚)。您还会在每次按键时重新连接它。

您需要在启动时将自动完成连接到任何相关元素。

例如将它放在 key 处理程序之外:

    $('.item-inventory #item_num').autocomplete({
        delay : 100,
        source: function(request, response){
            $.ajax({
                url: '../assets/server/orders/item_search.php',
                dataType: 'JSON',
                data: {search: request.term},
                success: function (data){
                    var keys = data.search;
                //  $('#item-name').val(data.search[0].item);
                //  itemPrice = data.search[0].price;
                //  itemDesc = data.search[0].desc;
                    response($.map( keys, function(i){
                        return{
                            label : i.id
                        };

                    }));

                }
            });
        },
        minLength : 1
    });