AUTOCOMPLETE

by Ashenvale Poring

HTML

<input type="text" name="promoitem" id="promoitem">
<input type="text" name="promocost" id="promocost">
<input type="text" name="promoqty" id="promoqty">
<input type="text" name="hidden_promo_item_id" id="hidden_promo_item_id">

CSS

input {
    display: block;
}

JavaScript

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

$('#promoitem').autocomplete({
        source: item,
        create: function() {
            console.log(100);
            $(this).data('ui-autocomplete')._renderItem = function(ul, item) {
                console.log(item.promodesc);
                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);
        }
    });