使用 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 输入中。

这意味着您可以在自动完成的选择属性中使用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 失败）。