CODEWITHSUNDEEP
javascriptjqueryautocomplete
Mark Hill
Mark Hill

Reputation: 1839

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

Upvotes: 2

Views: 3346

Answers (4)

Md Shaker ur rahman
Md Shaker ur rahman

Reputation: 1

Please initialize the autocomplete in ready function. Like : $(Id).autocomplete();

Upvotes: 0

Nilesh Rahinj
Nilesh Rahinj

Reputation: 1

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.

Upvotes: 0

Teo Em
Teo Em

Reputation: 21

you can add more event keydown like here:

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

Upvotes: 0

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93571

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
    });

Upvotes: 1

Related Questions