2012-01-07 10 views
2

jqueryオートコンプリート機能を使用してテキストボックスを作成しました。私のオートコンプリート結果のソースは、XMLファイルからASP.NET Webサービスを介して収集されます。オートコンプリートを使用して複数のテキストボックスを設定する

<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ファイルには、このような基本的な構造を有しています。

さらに、オートコンプリートテキストボックスの値の選択に基づいて、自動入力する2つのテキストボックスがフォームにあります。これらの値は、上記のようにXMLファイル(RRおよびRR_DIV)にも含まれています。今は、次のコードを使用して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(); 

私の質問は、私は自分のWebサービスとの選択された値に基づいて、他のテキストボックスを自動popluateから複数の値を返すことができるか、である:

$(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サービスは、次のようになります最初のテキストボックス?

答えて

1

アイテムが選択されたときに別のAJAXクエリを実行して、テキストフィールドに結果を入力できませんでしたか?選択した項目の値を送信して、サーバーに移入するデータを返信させます。

$('input[name=textbox1]').change(function(){ 
    $.ajax(
    { 
     ... 
     success: function(data) 
     { 
      $('input[name=otherTextbox1]').val(data.el1); 
      $('input[name=otherTextbox2]').val(data.el2); 
     } 
    ... 
:AJAXの成功方法で

は、これまでのデータは持っているものにテキストボックスを設定します
関連する問題