jquery autocomplete - selected value disappears from textbox

Question

I have written a custom jquery autocomplete function to display certain values and textfields to update on selecting the value as per the code below:

<input type="text" name="promoitem" id="promoitem">

$('#promoitem').autocomplete({
        source: "BckProcesses/GetPromoItems.asp",
        create: function() {
            $(this).data('ui-autocomplete')._renderItem = function(ul, item) {
                return $('<li>')
                .append('<a>' + item.promodesc + '</a>')
                .appendTo(ul);
            }
        },
        select: function(event, ui) {
            $('#promoitem').val(ui.item.promodesc); 
            $('#promocost').val(ui.item.promocost);
            $('#promoqty').val(ui.item.qty);
            $('#hidden_promo_item_id').val(ui.item.id);
        }
    });

This is what is return by the source file (GetPromoItems.asp)

[{"id": "1", "promodesc": "Ipad 4 ", "promocost": "200", "qty": "1"},{"id": "2", "promodesc": "Village Tickets", "promocost": "20", "qty": "2"}]

However, when I select the value from the ul, everything gets populated except the promoitem textfield. That fields goes to being blank.

Can anyone please let me know what could be causing this?

Thanks Sam

Answer 1

Since you're providing your own logic in the select handler, you need to prevent the default action, which is to place ui.item.value in the input.

Right now, your code is running, and then jQueryUI is immediately trying to place ui.item.value in the input, which explains the empty value.

So really all you need to do is call event.preventDefault(); or return false; from the select handler:

select: function(event, ui) {
    $('#promoitem').val(ui.item.promodesc); 
    $('#promocost').val(ui.item.promocost);
    $('#promoqty').val(ui.item.qty);
    $('#hidden_promo_item_id').val(ui.item.id);

    event.preventDefault(); // <---
}

Answer 2

After spending an hour, finally got to an point that Jquery UI autocomplete sets the value to default.

Only one line needs to put and prevent Jquery default function to get the wok done.

// pincode list autocomplete

$('input[name=\'pincode\']').autocomplete({
        'source': function (request, response) {
            $.ajax({
                url: 'index.php?route=seller/pincode/pincodeAutocomplete&filter_name=' + encodeURIComponent($('input[name=\'pincode\']').val()),
                dataType: 'json',
                success: function (json) {
                    json.unshift({
                        pincode_id: '',
                        pincode: '-- None --'
                    });
                    response($.map(json, function (item) {
                        return {
                            label: item['pincode'],
                            value: item['pincode_id']
                        }
                    }));
                }
            });
        },
        'select': function (event, ui) {
            event.preventDefault();
            $('input[name=\'pincode\']').val(ui.item.label);
            $('input[name=\'pincode_id\']').val(ui.item.value);
        }
    });