JQuery 자동 완성 항목을 선택할 때 SQL 데이터로 필드 채우기

Question

입력 양식에 성, 이름 및 전자 메일이 있습니다. 텍스트 상자에 입력하고 제출을 클릭하여 DB-2에서 레코드를 작성하는 대신 jQuery 자동 완성을 사용하여 다른 기존 데이터베이스 DB-1을 검색하고 거기에있는 테이블에서 사용자 정보를 가져 오려고합니다. 그래서 autocomplete 선택을 클릭하면 3 개의 텍스트 상자에 정보가 입력되어 제출을 클릭하면 DB-1의 내용과 일치하는 데이터로 DB-2의 레코드가 생성됩니다.

현재 DB-2 용 입력 필드와 제출 버튼이 있습니다. 성, 이름, 이메일을 수동으로 입력 할 수 있으며 제출을 클릭하면 레코드가 DB-2에 추가됩니다. 또한 DB-1의 테이블을 스캔하고 레코드를 선택할 수 있도록 자동 완성 기능이 있습니다. 그러나 그 입력 필드를 채우는 방법을 잘 모르겠습니다. 나는 이것이 jQuery autocomplete documentation example과 같을 것임에 틀림 없다고 생각합니다. 그러나 내가 선택한 것을 필요로하지 마십시오.이 선택과 관련된 여러 다른 열이 필요합니다. 여기에 제가 지금 가지고있는 코드가 있습니다. 나는 그것이 LNAME, FNAME에 대한 모든 변수 값을 수집 선택되면 그때 필요한 기록을 검색 자동 완성을 사용하는 방법, 그래서 다시

<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> 

: 여기

<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> 

내 위젯 코드 , 그리고 전자 메일 때 (FullName) 내 autocomplete 배열 끌어 오기.

db-1의 다른 쿼리를 수행하기 위해 선택을 사용해야하고 텍스트 상자에 반환 값을 추가해야합니까? 자동 완성에서 선택한 ID를 가지고 있다면이 작업을 수행 할 수 있지만 그 작업을 수행하는 방법을 모르겠습니다.

foreach 프로세스 중에 해당 값을 가져 오는 방법이 있다면 더 좋을 것입니다.

나는 gridview에서 쿼리 결과를 반환하는 코드를 복사 할 준비가되었다. 그런 다음 gridview 선택을 사용하여 텍스트 필드를 채울 수있다. 그러나이 자동 완성이 어떤 식 으로든 유선으로 연결될 수 있다면 페이지에서 더 깨끗해 보일 것입니다. 이 제안에 대해 미리 감사드립니다. - 팀

Answer 1

현재 자동 완성 소스는 이름의 배열입니다. 하지만 선택한 옵션의 이름, 성 및 전자 메일을 채우려는 경우 먼저 원본 데이터를 간단한 이름 배열에서 개체의 배열로 변경해야합니다. 각 개체에는 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> 
}