javascript - jquery autocomplete - selected value disappears from textbox - Stack Overflow

admin管理员组

文章数量:1336659

I have written a custom jquery autoplete 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').autoplete({
        source: "BckProcesses/GetPromoItems.asp",
        create: function() {
            $(this).data('ui-autoplete')._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

I have written a custom jquery autoplete 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').autoplete({
        source: "BckProcesses/GetPromoItems.asp",
        create: function() {
            $(this).data('ui-autoplete')._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

• javascript
• jquery
• jquery-ui
• jquery-autoplete
• jquery-ui-autoplete

Share Improve this question Follow edited Nov 18, 2014 at 22:33 Andrew Whitaker 126k3232 gold badges295295 silver badges308308 bronze badges asked Nov 17, 2014 at 23:43 Sam DennisSam Dennis 3311 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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

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

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

// pincode list autoplete

$('input[name=\'pincode\']').autoplete({
        'source': function (request, response) {
            $.ajax({
                url: 'index.php?route=seller/pincode/pincodeAutoplete&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);
        }
    });

本文标签： javascriptjquery autocompleteselected value disappears from textboxStack Overflow