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>

auto-complete从文件中提取STREET属性并填充我的文本框。

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

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

我的缩写网络服务看起来像这样：

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

使用自动完成功能填充多个文本框

1 个答案: