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

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

本文关键字：设置 输入 选项 jQuery-UI 选择 使用      更新时间：2023-09-26

大家好，我是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);
            }
        });
    }
});

我不知道如何将数据自动设置为国家字段谢谢。

好了。我已经改变了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失败)。

相关文章：