jquery - 使用自动完成填充多个文本框

Question

我有一个使用 jquery 自动完成功能填充的文本框。我的自动完成结果的来源是通过 ASP.NET Web 服务从 XML 文件收集的。 XML 文件的基本结构如下:

<RAIL_INTERSECTIONS>
   <RAIL_INT RR="BNSF" RR_DIV="FED" RR_SUBDIV="MAIN" ADDRESS="6700" STREET="LINCOLN" BRANCH="ALVIN" MILE_POST="146" />
   ...
</RAIL_INTERSECTIONS>

自动完成功能从文件中提取 STREET 属性并填充我的文本框。

此外，我的表单上还有另外两个文本框，我想根据自动完成文本框中的值选择自动填充它们。这些值也包含在 XML 文件中——RR 和 RR_DIV，如上所示。现在，我只需使用以下代码来调用我的网络服务并获取街道的单个值。

$(function () {
    $(".tb").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "rail_intersection_info.asmx/GetCrossingLocations",
                data: "{ 'location': '" + request.term + "' }",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataFilter: function (data) { return data; },
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            value: item
                        }
                    }))
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        },
        minLength: 2
    });
});

我的缩写 Web 服务如下所示:

List<string> streets = new List<string>();

XmlDocument xmlDocument = new XmlDocument();
xmlDocument.Load(Server.MapPath(XmlCrossingFile));

XmlNodeList xmlNodeList = xmlDocument.GetElementsByTagName("RAIL_INT");
for (int i = 0; i < xmlNodeList.Count; i++ )
{
    streets.Add(xmlNodeList[i].Attributes["STREET"].Value);
}

var data = streets.Where(m => m.ToLower().StartsWith(location.ToLower()));

return data.ToList();

我的问题是，如何从网络服务返回多个值并根据第一个文本框的选定值自动填充其他文本框？

Answer 1

当选择该项目并用结果填充文本字段时，您是否不能启动另一个 AJAX 查询？发送所选项目值并让服务器回复您要填充的数据。

在 AJAX 成功方法中，将文本框设置为数据的内容:

$('input[name=textbox1]').change(function(){
    $.ajax(
    {
        ...
        success: function(data)
        {
            $('input[name=otherTextbox1]').val(data.el1);
            $('input[name=otherTextbox2]').val(data.el2);
        }
    ...