使用jQuery-UI自动完成功能选择选项时设置多个输入的值

Question

大家好，我是Java脚本的新手。 所以我希望你能帮助我。 当用户将数据设置到城市字段中时，我想自动在国家/地区字段中设置数据。 我有一个xml文件：

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

在html文档中，我有两个输入字段

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

这是我的js代码：

$.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);
            }
        });
    }
});

我不知道如何自动将数据设置到国家/地区字段。谢谢。

Answer 1

好的，这应该为您做。 我更改了data的定义，因此它现在具有三个属性：

• label与您的原始value相同。
• city因此您可以将其放入您的#city输入中。
• country因此您可以将其放入您的#country输入中。

这意味着您可以在自动完成功能的select属性中使用ui.item.city和ui.item.country 。

因为现在有三个属性，所以您需要自定义自动完成功能，并告诉它使用label作为其选项，这是_renderItem部分的作用。

$.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);
            }
        });
    }
});

另外，我还创建了一个“工作中”的Fiddle （因为您的代码使用的是ajax XML源，所以我将响应硬编码在一个变量中，并在error属性中生成了自动完成功能，因为ajax请求始终会因jsfiddle.net而失败）。