Question

我正在使用带有asp.net文本框的JQuery UI Autocomplete。自动完成工作正常。但是如何将选定的返回数据ID分配给hiddenField？我的服务器Side Function返回了包含的对象列表（这是一个示例）：

 public List<Employee> GetEmployeeList()
{
    List<Employee> empList = new List<Employee>();
    empList.Add(new Employee() { ID = 1, Email = "Mary@somemail.com" });
    empList.Add(new Employee() { ID = 2, Email = "John@somemail.com" });
    empList.Add(new Employee() { ID = 3, Email = "Amber@somemail.com" });
    empList.Add(new Employee() { ID = 4, Email = "Kathy@somemail.com" });
    empList.Add(new Employee() { ID = 5, Email = "Lena@somemail.com" });
    empList.Add(new Employee() { ID = 6, Email = "Susanne@somemail.com" });
    empList.Add(new Employee() { ID = 7, Email = "Johnjim@somemail.com" });
    empList.Add(new Employee() { ID = 8, Email = "Jonay@somemail.com" });
    empList.Add(new Employee() { ID = 9, Email = "Robert@somemail.com" });
    empList.Add(new Employee() { ID = 10, Email = "Krishna@somemail.com" });

    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

Answer 1

您可以订阅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 ); 
}

我抓住了hidid字段，有点像一种hackish（我不记得首选的方法是什么）所以这是一个改进的领域，但这应该指向你正确的方向。

使用JQuery AutoComplete的ASP.NET TextBox

1 个答案: