2014-03-02 2 views
0

세부 정보를 표시하려면 선택한 항목의 ID가 필요합니다. 나는 선택 이벤트에 경고를 넣어 레이블과 값 안에 무엇이 있는지 알았지 만 레이블과 값에 모두 id 대신 동일한 텍스트가 들어 있습니다.Jquery 자동 완성 - 선택한 값의 ID를 얻으려면 어떻게해야합니까? 추가 처리를 위해 선택한 항목의 ID가 필요합니다.

그래서 선택한 항목의 ID를 가져 오는 방법이 있습니까? 나는 data.It에 대한의 WebMethod를 호출하고

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>JQuery Demo</title>`enter code here` 

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> 




    <script type="text/javascript"> 
     $(function() { 



      $("[id$=txtAuto]").autocomplete({ 
       source: function (request, response) { 
        $.ajax({ 
         url: "Contact.aspx/GetNameList", 

         data: "{ 'label': '" + request.term + "' }", 
         dataType: "json", 
         type: "POST", 
         contentType: "application/json; charset=utf-8", 

         success: function (data) { 

          var Details = []; 

          for (i = 0; i < data.d.length; i++) { 


           Details[i] = data.d[i].label; 

          } 
          $.each(Details, function (index, val) { 
           console.log(val.value); 
          }); 
          response(Details); 
         }, 


         error: function (result) { 
         } 


        }); 

       } 

      , select: function (event, ui) { 
       alert(ui.item.value + ' - ' + ui.item.label); 

      } 


      }); 
     }); 

    </script> 


</head> 
<body> 
    <form id="form1" runat="server"> 
     <div class="demo"> 
      <div class="ui-widget"> 
       <label for="txtAuto">Enter Name: </label> 
       <asp:TextBox ID="txtAuto" runat="server"> </asp:TextBox> 
       <asp:TextBox ID="TextBox1" runat="server"> 
       </asp:TextBox> 

      </div> 
      <div id="Result">Click here for the time.</div> 
     </div> 
    </form> 
</body> 
</html> 

C#을 페이지 단지 값 및 레이블 속성 유형 UsernameList의 목록을 반환

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web.Services; 
using System.Web.Script.Services; 
public partial class Contact : Page 
{ 
    [WebMethod] 
    public static string GetDate() 
    { 
     return DateTime.Now.ToString(); 
    } 


    [WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = false)] 

    public static List<UserNameList> GetNameList(string label) 
    { 

     var emp = new UserNameList(); 
     var fetchName = emp.GetEmpList() 
     .Where(m => m.label.ToLower().StartsWith(label.ToLower())); 

     return fetchName.ToList(); 

    } 

    } 

UserNameList.cs

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Services; 
/// <summary> 
/// Summary description for UserNameList 
/// </summary> 
public class UserNameList 
{ 
    public int value { get; set; } 
    public string label { get; set; } 


    [WebMethod] 
    public List<UserNameList> GetNameList(string label) 
    { 
     UserNameList emp = new UserNameList(); 
     var fetchName = emp.GetEmpList() 
      .Where(m => m.label.ToLower().StartsWith(label.ToLower())); 
     return fetchName.ToList(); 

    } 



    public List<UserNameList> GetEmpList() 
    { 
     List<UserNameList> emp = new List<UserNameList>(); 


     emp.Add(new UserNameList() { value = 1, label = "Arjun" }); 
     emp.Add(new UserNameList() { value = 2, label = "Aaryan" }); 
     emp.Add(new UserNameList() { value = 3, label = "Anoop" }); 
     emp.Add(new UserNameList() { value = 4, label = "Bob" }); 
     emp.Add(new UserNameList() { value = 5, label = "Boby" }); 
     emp.Add(new UserNameList() { value = 6, label = "Cristen" }); 
     emp.Add(new UserNameList() { value = 7, label = "Cris" }); 
     return emp; 
    } 
} 

답변

0

그 잠시이지만 나는 당신의 행동에서 데이터를 수신하지만 라벨 데이터를 처리하고 유지하는 것이 무엇인지 잘못 생각한다고 생각합니다. 호를보기 위해 다음 변경을 시도하십시오. 너도 간다.

당신은 데이터를 처리 할 수의 성공 섹션을 변경해야합니다 : 여기 그래서 아마 오타를 입력하고 바로 자동 완성 API에서 사라지고,

source: function(request, response) { 
    $.ajax({ 
     url: "Contact.aspx/GetNameList", 
     data: "{ 'label': '" + request.term + "' }", 
     dataType: "json", 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     }, 
     success: function(data) { 
     response($.map(data, function(item) { 
      return { 
      label: item.label, 
      value: item.value 
      } 
     })); 
     } 
    }); 
}, 
select: function(event, ui) { 
    alert(ui.item ? 
     "Selected: " + ui.item.label + " (" + ui.item.label + ")" : 
     "Nothing selected, input was " + this.value); 
} 

내가 위의 테스트를하지 않은, 좋은있다 주변의 예. 또한 원래 배열이 아닌 새로운 배열을 얻는 방법으로 $ .each 대신 $ .map을 사용하십시오.

어쨌든 도움이 되길 바랍니다. 환호

관련 문제