使用 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);
            }
        });
    }
});

我还创建了一个 "working" Fiddle（因为您的代码使用的是 ajax XML 源代码，所以我将响应硬编码在一个变量中并生成error 属性中的自动完成，因为 ajax 请求总是会因 jsfiddle.net).

而失败

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

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

javascript

jquery

jquery-ui

autocomplete

jquery-ui-autocomplete