JQueryオートコンプリート項目の選択時にSQLデータをフィールドに入力する

Question

入力フォームに姓、名、電子メールがあります。テキストボックスに入力してsubmitをクリックしてDB-2でレコードを作成するのではなく、既存のデータベースDB-1をjQueryオートコンプリートで検索し、そのテーブルからユーザー情報を取得します。だから私はオートコンプリートの選択肢をクリックすると、3つのテキストボックスに情報を入力しなければならないので、投稿をクリックするとDB-2のレコードがDB-1のものと一致するデータで作成されます。

現在、DB-2の入力フィールドと送信ボタンがあります。姓、名、メールアドレスを手動で入力することができます。投稿をクリックすると、レコードがDB-2に追加されます。 DB-1のテーブルをスキャンしてレコードを選択できるように、オートコンプリートも行っています。しかし、私はどのようにそれらの入力フィールドを設定するか分からない。私はそれがこのようなものでなければならないと思いますjQuery autocomplete documentation example。しかし、私が選択したものだけでなく、その選択に関連する他のいくつかの列が必要です。ここに私が今持っているコードがあります。ここで

<form method="post">  
     @Html.TextBox("lastName", Request.Form["lastName"], new { maxlength = 50 }) 
     @Html.TextBox("firstName", Request.Form["firstName"], new { maxlength = 50 }) 
     @Html.TextBox("email", Request.Form["email"], new { maxlength = 50 }) 
     <p><input type="submit" name="btnSubmit" value="Assign Reader" /></p> 
</form> 

は私のウィジェットコードです：だからもう一度

<div class="ui-widget"> 
     <input id="fullname" name="fullname" placeholder="Search by Name" size="50"> 
</div> 

    List<string> LastNames = new List<string>(); 
    foreach (var item in db1.Query("SELECT * FROM myTableInDB1; ")) 
    { 
     var LName = item.LastName; 
     var FName = item.FirstName; 
     var eMail= item.email;   
     var FullName = LName + ", " + FName; 
     FullNames.Add(FullName); 
    }  
<script> 
    $(function() { 
     function log(message) { 

<<note: this is where the jQuery example has the selection posted 
to a log. I can do that but just with the FullName data. I'm not 
sure what happens to the other data in the above foreach.>> 

     } 
     var FullNames = @Html.Raw(Newtonsoft.Json.JsonConvert 
         .SerializeObject(FullNames.ToArray())); 
     $("#fullname").autocomplete({ 
      source: FullNames, 

<<note: I also added this bit in to test that my selection 
was getting posted to the log window>> 

      select: function(event, ui) { 
      log(ui.item ? 
       ui.item.value : this.value); 
     } 
     }); 
    }); 
</script> 

、どのように私はそれが選択されると、私はその後、必要なレコードを探し出すためにオートコンプリートを使用することができますLNAME、します。FNameのためのすべてのこれらの変数の値を収集、そして私が（FullName）を私のオートコンプリート配列に引っ張っているときにはeMail。

db-1の別のクエリを実行するには、選択を使用してテキストボックスにその戻り値を追加する必要がありますか？私はオートコンプリートから選択のIDを持っていれば私はこれを行うことができますが、私はそれを得る方法はわかりません。

foreachプロセス中にこれらの値を取得する方法がある場合は、さらに良い方法があります。

私は、グリッドビューでクエリ結果を返すコードをコピーするだけで、グリッドビューの選択を使用してテキストフィールドにデータを取り込むことができます。しかし、このオートコンプリートが何らかの方法で配線されていれば、ページ上ではよりきれいに見えます。この件に関するご意見をお寄せいただきありがとうございます。 --Tim

Answer 1

現在、オートコンプリートソースは名前の配列です。しかし、選択したオプションのFirstName、LastName、Emailに値を設定したいとします。最初に、ソースデータを単純な名前の配列からオブジェクトの配列に変更する必要があります。これらの各オブジェクトには、FirstName、LastName、Emailプロパティがあります。

@{ 
    var db=new MyDb(); 
    var userList = db.Users.SqlQuery("SELECT * from Users") 
          .Select(f => new { FirstName = f.FirstName, 
              LastName = f.LastName, 
              Email = f.Email, 
              value = f.FirstName+" "+ f.LastName}).ToList(); 

} 

ユーザーテーブルがFirstName、LastNameとEmailフィールドを持っていると仮定。

次にソースとしてオブジェクトのこの配列を使用して選択した場合に、選択された項目（オブジェクト）を取得し、FirstName、LastName & Emailプロパティ値を読み取り、入力フィールドに設定されます。

@section scripts 
{ 
    <script> 

     $(function() { 
      var userArray = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(userList)); 

      $("#fullname").autocomplete({ 
       source: userArray, 
       select: function(event, ui) {      
        $("#firstName").val(ui.item.FirstName); 
        $("#lastName").val(ui.item.LastName); 
        $("#email").val(ui.item.Email); 
       } 
      }); 
     }); 

    </script> 
}