Set the Values of Multiple Inputs When Selecting an Option using jQuery-UI Autocomplete

Question

Hello everyone I am newbie in java-script. So I hope that you can help me. When user set data into city field, i want to set data in country field automatically. I have an xml file:

<ROWSET>
<ROW>
<city></city>
<country></country>
</ROW>
</ROWSET>

In html document I have two input fields

<input id="id_city">
<input id="country">

Here is my js code:

$.ajax({
    url: "/media/xml/country.xml", //your url
    type: "GET", //may not need this-fiddle did-default is GET
    dataType: "xml",
    success: function(xmlResponse) {
        var data = $("ROW", xmlResponse).map(function() {
            return {
                value: $("city", this).text() + ", " + ($.trim($("country", this).text()) || "(unknown country)")
            };
        }).get();
        $("#id_city").autocomplete({
            source: function(req, response) {
                var re = $.ui.autocomplete.escapeRegex(req.term);
                var matcher = new RegExp("^" + re, "i");
                response($.grep(data, function(item) {
                    return matcher.test(item.value);
                }));
            },
            minLength: 2,
            select: function(event, ui) {
                $("p#result").html(ui.item ? "Selected: " + ui.item.value + ", cityId: " + ui.item.id : "Nothing selected, input was " + this.value);
            }
        });
    }
});

I don't know how to set automatically data to country field Thanks.

Sorry, I don't know how to set automatically data to country field — Zagorodniy Olexiy
– Zagorodniy Olexiy, Commented Oct 6, 2015 at 12:49

John C · Accepted Answer · 2015-10-07 09:42:30Z

1

Ok this should do it for you. I've change the definition of data so it now has three properties:

label which is the same as your original value.
city so you can put it into your #city input.
country so you can put it into your #country input.

This means you can use ui.item.city and ui.item.country in the select property of the autocomplete.

Because there are now have three properties you need to customise the autocomplete and tell it to use label for it's options which is what the _renderItem section does.

$.ajax({
    url: "/media/xml/country.xml",
    type: "GET",
    dataType: "xml",
    success: function (xmlResponse) {
        var data = $("ROW", xmlResponse).map(function () {
            return {
                label: $("city", this).text() + ", " + ($.trim($("country", this).text()) || "(unknown country)"),
                city: $.trim($("city", this).text()),
                country: $.trim($("country", this).text())
            };
        }).get();
        $("#id_city").autocomplete({
            source: function (req, response) {
                var re = $.ui.autocomplete.escapeRegex(req.term);
                var matcher = new RegExp("^" + re, "i");
                response($.grep(data, function (item) {
                    return matcher.test(item.city);
                }));
            },
            minLength: 2,
            select: function (event, ui) {
                $("p#result").html(ui.item ? "Selected: " + ui.item.label + ", cityId: " + ui.item.city : "Nothing selected, input was " + this.value);
                $("#id_city").val(ui.item.city);
                $("#country").val(ui.item.country);
                return false;
            },
            _renderItem: function (ul, item) {
                return $("<li></li>")
                    .data("value", item)
                    .append("<a>" + item.label + "</a>")
                    .appendTo(ul);
            }
        });
    }
});

Also I've created a "working" Fiddle (because your code is using an ajax XML source I've hardcoded the response in a variable and generated the autocomplete in the error property as the ajax request will always fail from jsfiddle.net).

edited Oct 7, 2015 at 9:42

answered Oct 6, 2015 at 14:50

John C

3,1123 gold badges36 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zagorodniy Olexiy Over a year ago

Thank you for your answer. But there an error TypeError: $(...).autocomplete(...).data(...) is undefined }).data("autocomplete")._renderItem = function(ul, item) {

John C Over a year ago

@ZagorodniyOlexiy Ah yes, sorry about that. It looks like they have changed jQuery-UI since I used the original code pattern in my project. I've updated it now.

Collectives™ on Stack Overflow

Set the Values of Multiple Inputs When Selecting an Option using jQuery-UI Autocomplete

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related