javascript - JQuery Autocomplete not filling input with selected item - Stack Overflow

admin管理员组

文章数量:1332383

I have a jQuery UI Autoplete which is being populated by a third party web service. The autoplete is working correctly, however when I select an item from the list the autoplete input field goes blank.

The autoplete is used to search an address, once selected the address gets split into its ponents which fill out the rest of the form.

So I have the following input field ids: #FullAddress, #AddressLine1,#AddressLine2, #AddressSuburb,#AddressState, #AddressPostcode with #FullAddress being the autoplete field.

The web service returns an array of objects each containing key value pairs named pretty much as above.

Originally the JS code looked like:

$("#FullAddress").autoplete({
    source: "URL",
    dataType: "JSONP",
    autoFocus: true,
    select: function (event, ui) {
        $("#FullAddress").val(ui.item['FullAddress']);
        $("#AddressLine1").val(ui.item['Line1']);
        $("#AddressLine2").val(ui.item['Line2']);
        $("#AddressSuburb").val(ui.item['Suburb']);
        $("#AddressState").val(ui.item['State']);
        $("#AddressPostcode").val(String(ui.item['Postcode']));
    }
});

Which contacted the server and was returning results, but they were not being displayed in the dropdown:

Clicking any option filled out all fields with address data (you just couldn't see which address you selected) apart from #FullAddress which gets blanked out. i.e. in the image above once one was selected the "123 te" disappears.

I discovered the following to add to the create event which fixed the dropdown display issue, but did not fix the fact that the #FullAddress field gets blanked no matter what happens.

    $("#FullAddress").autoplete({
        source: "URL",
        dataType: "JSONP",
        autoFocus: true,
        create: function () {
            $(this).data('ui-autoplete')._renderItem = function (ul, item) {
                return $("<li>")
                    .append('<a>' + item.FullAddress + '</a>')
                    .appendTo(ul);
            };
        },
        select: function (event, ui) {
            $("#FullAddress").val(ui.item['FullAddress']);
            $("#AddressLine1").val(ui.item['Line1']);
            $("#AddressLine2").val(ui.item['Line2']);
            $("#AddressSuburb").val(ui.item['Suburb']);
            $("#AddressState").val(ui.item['State']);
            $("#AddressPostcode").val(String(ui.item['Postcode']));
        }
    }); 

Does any one know any other reasons why the autoplete input field would be emptying?

It does not appear to care whether or not an item was selected, no matter what happens on blur the field empties.

Thanks

I have a jQuery UI Autoplete which is being populated by a third party web service. The autoplete is working correctly, however when I select an item from the list the autoplete input field goes blank.

The autoplete is used to search an address, once selected the address gets split into its ponents which fill out the rest of the form.

So I have the following input field ids: #FullAddress, #AddressLine1,#AddressLine2, #AddressSuburb,#AddressState, #AddressPostcode with #FullAddress being the autoplete field.

The web service returns an array of objects each containing key value pairs named pretty much as above.

Originally the JS code looked like:

$("#FullAddress").autoplete({
    source: "URL",
    dataType: "JSONP",
    autoFocus: true,
    select: function (event, ui) {
        $("#FullAddress").val(ui.item['FullAddress']);
        $("#AddressLine1").val(ui.item['Line1']);
        $("#AddressLine2").val(ui.item['Line2']);
        $("#AddressSuburb").val(ui.item['Suburb']);
        $("#AddressState").val(ui.item['State']);
        $("#AddressPostcode").val(String(ui.item['Postcode']));
    }
});

Which contacted the server and was returning results, but they were not being displayed in the dropdown:

Clicking any option filled out all fields with address data (you just couldn't see which address you selected) apart from #FullAddress which gets blanked out. i.e. in the image above once one was selected the "123 te" disappears.

I discovered the following to add to the create event which fixed the dropdown display issue, but did not fix the fact that the #FullAddress field gets blanked no matter what happens.

    $("#FullAddress").autoplete({
        source: "URL",
        dataType: "JSONP",
        autoFocus: true,
        create: function () {
            $(this).data('ui-autoplete')._renderItem = function (ul, item) {
                return $("<li>")
                    .append('<a>' + item.FullAddress + '</a>')
                    .appendTo(ul);
            };
        },
        select: function (event, ui) {
            $("#FullAddress").val(ui.item['FullAddress']);
            $("#AddressLine1").val(ui.item['Line1']);
            $("#AddressLine2").val(ui.item['Line2']);
            $("#AddressSuburb").val(ui.item['Suburb']);
            $("#AddressState").val(ui.item['State']);
            $("#AddressPostcode").val(String(ui.item['Postcode']));
        }
    }); 

Does any one know any other reasons why the autoplete input field would be emptying?

It does not appear to care whether or not an item was selected, no matter what happens on blur the field empties.

Thanks

• javascript
• jquery
• asp-mvc
• jquery-ui
• autoplete

Share Improve this question Follow asked Mar 25, 2014 at 22:09 JakeJake 1,22722 gold badges2929 silver badges4646 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

If you add event.preventDefault(); as the first line in the select function that should stop the field emptying:

select: function (event, ui) {
    event.preventDefault();
    $("#FullAddress").val(ui.item['FullAddress']);
    ...
}

本文标签： javascriptJQuery Autocomplete not filling input with selected itemStack Overflow