ASP.NET TextBox With JQuery AutoComplete

Question

i am using JQuery UI Autocomplete with asp.net textbox. AutoComplete works right. but how can i assign selected ID of returned Data to an hiddenField? My server Side Function returned list of objects that contains (this is an example) :

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

and this is ASPX Code :

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

here is my jquery Code :

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

And this is My WEb Method Side Code :

<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

What are you doing with the hidden field value that requires an ASP.NET hidden field? — jwheron
– jwheron, Commented Jan 10, 2011 at 17:26
@jwiscarson : i have to keep record ID , for example Textbox contains Sellers . i have to keep its id for doing an action on it (search , save ,...) — Shahin
– Shahin, Commented Jan 10, 2011 at 18:26
Are those actions only performed on the server side? If you're using web methods to perform a fetch action, then you could also use them for these other actions and save yourself the headache of trying to use an ASP.NET control's ID in JavaScript. — jwheron
– jwheron, Commented Jan 10, 2011 at 18:30

Roman · Accepted Answer · 2011-01-10 14:15:37Z

1

You could subscribe to the success event and grab the ID from ui.item.id like so

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

I got a hold of the hidid field in a bit of a hackish way (I can't remember what the preferred way to do it is) so that's an area of improvement, but this should point you in the right direction.

answered Jan 10, 2011 at 14:15

Roman

20.3k6 gold badges73 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Shahin Over a year ago

i'm Sorry , english is not my first language ... what is the meaning of hackish ? (i think it means trick), does ui an object? thank you.

Roman Over a year ago

@shaahin: In this case "hackish" (which by the way isn't a word, at least not a formal one) means it works but may not be entirely correct. If you're using ASP.NET 4 you can specify the client side ID (you just have to make sure it's unique) so you don't need to resort to the <%= something.ClientID %> trick.

Shahin Over a year ago

I Wrote This Code : select: function (event, ui) { // now assign the id of the selected element into your hidden field //$("#<%= hidid.ClientID %>").val(ui.item.ID); alert(ui.item.ID); }, but alert's text is undefined. what is the problem?

Shahin Over a year ago

i wrote alert( ui.item.ID ); instead $("#<%= hidid.ClientID %>").val(ui.item.ID ); to see value, it was undefined , ID is unknown property did i put your code in correct place?

Roman Over a year ago

@shaahin: The code looks like it's in the correct place. I used code from the jQuery UI website as a reference. Maybe you can try putting in UI first and see what properties that object has and try to find the one that you need. You can use firebug in firefox to put a breakpoint in the method and look at the values.

|

Collectives™ on Stack Overflow

ASP.NET TextBox With JQuery AutoComplete

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related