帶有JQuery自動完成功能的ASP.NET TextBox

我使用的是帶有asp.net文本框的JQuery UI自動完成功能。自動完成功能正常。但我怎樣才能分配返回的數據選定的ID到一個hiddenField？我的服務器端函數返回一個包含對象的列表（這是一個例子）：帶有JQuery自動完成功能的ASP.NET TextBox

public List<Employee> GetEmployeeList() 
{ 
    List<Employee> empList = new List<Employee>(); 
    empList.Add(new Employee() { ID = 1, Email = "[email protected]" }); 
    empList.Add(new Employee() { ID = 2, Email = "[email protected]" }); 
    empList.Add(new Employee() { ID = 3, Email = "[email protected]" }); 
    empList.Add(new Employee() { ID = 4, Email = "[email protected]" }); 
    empList.Add(new Employee() { ID = 5, Email = "[email protected]" }); 
    empList.Add(new Employee() { ID = 6, Email = "[email protected]" }); 
    empList.Add(new Employee() { ID = 7, Email = "[email protected]" }); 
    empList.Add(new Employee() { ID = 8, Email = "[email protected]" }); 
    empList.Add(new Employee() { ID = 9, Email = "[email protected]" }); 
    empList.Add(new Employee() { ID = 10, Email = "[email protected]" }); 

    return empList; 
}

，這是ASPX代碼：

<form id="form1" runat="server"> 
<div class="demo"> 
    <div class="ui-widget"> 
     <label for="tbAuto"> 
      Enter Email: 
     </label> 
     <asp:TextBox ID="tbAuto" class="tb" runat="server"> 
     </asp:TextBox> 
    </div> 
</div> 
<asp:TextBox ID="TextBox1" runat="server"> 
</asp:TextBox> 
<asp:Label runat="server" ID="lbl" Text=""></asp:Label> 
<asp:HiddenField runat="server" ID="hidid" /> 
<asp:Button ID="Button1" runat="server" Text="Button" /> 
</form>

這裏是我的jQuery代碼：

<script type="text/javascript"> 

    $(function() { 


     $(".tb").autocomplete({ 

     select: function(event, ui) { 
     // now assign the id of the selected element into your hidden field 
     $("#<%= hidid.ClientID %>").val(ui.item.ID); 
     }, 

      source: function (request, response) { 
       $.ajax({ 
        url: "Default.aspx/FetchEmailList", 
        data: "{ 'mail': '" + 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.Email 
          } 

         } 
         ) 
         ) 
        } 

        , 
        error: function (XMLHttpRequest, textStatus, errorThrown) { 
         alert(textStatus); 
         alert(errorThrown); 
        } 
       }); 
      }, 
      minLength: 1 
     }); 
    }); 
</script>

這是我的WEb方法代碼：

<WebMethod()> _ 
Public Shared Function FetchEmailList(ByVal mail As String) As List(Of Employee) 
    Dim emp = New Employee() 
    Dim fetchEmail = emp.GetEmployeeList() 
    Return fetchEmail 
End Function

來源

2011-01-10 Shahin

我的問題清除嗎？ – Shahin 2011-01-10 13:28:40

當然，這是花花公子，祝你好運:-) – 2011-01-10 14:17:30

你可以訂閱success事件和ui.item.id搶ID，像這樣

select: function(event, ui) { 
    // now assign the id of the selected element into your hidden field 
    $("#<%= hidid.ClientID %>").val(ui.item.id); 
}

我在一個有點hackish的方式得到了hidid場的保持（我不記得什麼的首選方式要做到這一點），所以這是一個進步的領域，但這應該指向正確的方向。

來源

2011-01-10 14:15:37 R0MANARMY

帶有JQuery自動完成功能的ASP.NET TextBox

回答

相關問題