Mark Hill Mark Hill - 4 months ago 15
Javascript Question

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

Answer

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