Autocomplete not firing on first input

问题

so I've googled, searched here, went everywhere, and I can't find an answer. I'm using jQuery UI autocomplete to search a list of item ids numbers. They can be any length from 1 - 99999.

The Issue:

When I type '2' for example, nothing happens, then I hit backspace and type '2' again and this time, anything starting with 2 appears below, and the event shows up in the "Network List" on developer's tools. Furthermore, when I search 1, only 1 shows up, but it's not performing the search it's just spitting back the input value. but when i hit backspace and type in 1 again, the search fires and I get the same results as I did with 2. Normally no matter what number I type it should just fire by default shouldn't it? How do I correct this and get my autocomplete working properly.

CODE:

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

回答1:

Basically you are connecting the autocomplete after the first keypress (which is too late for the first keypress). You are also reconnecting it on every keypress.

You need to connect the autocomplete once at startup to any relevant element.

e.g. place this outside of the key handler:

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

回答2:

you can add more event keydown like here:

$('.item-inventory').on('keyup keydown', '#item_num', function(){
........
});

回答3:

If not works Properly then At Page load call the autocomplete function with empty array of strings. E.g. $("input").each(function () { $(this).autocomplete({ src: [] }); }); Now this will work at first keypress also. Best of Luck.

来源：https://stackoverflow.com/questions/26679501/autocomplete-not-firing-on-first-input

标签

javascript

jquery

autocomplete