How to get the value of autocomplete textbox in asp.net

Question

Below is my code to populate an autocomplete textbox using webservice. I am fetching two database fields, once i select an item from the list related rate is displayed on an another textbox. Instead of getting the ServiceId i am getting rate field. How do i get ServiceId value please help me out. Thanking you in advance.

.aspx code

<asp:HiddenField ID="hfServiceId" runat="server" />
<asp:TextBox ID="txtTest" runat="server"></asp:TextBox>
<asp:TextBox ID="txtRate" runat="server"></asp:TextBox>
<asp:Button ID="btnAdd" runat="server"  Text="Add" OnClick="Insert"/>

my webservice code

 [WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string[] GetServices(string prefix)
{
    List<string> customers = new List<string>();
    using (SqlConnection conn = new SqlConnection())
    {
        conn.ConnectionString = ConfigurationManager
                .ConnectionStrings["conString"].ConnectionString;
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandText = "select ServiceName, ServiceId,Rate from Service where " +
            "ServiceName like @SearchText + '%'";
            cmd.Parameters.AddWithValue("@SearchText", prefix);
            cmd.Connection = conn;
            conn.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    customers.Add(string.Format("{0}-{1}-{2}", sdr["ServiceName"], sdr["ServiceId"], sdr["Rate"]));
                }
            }
            conn.Close();
        }
        return customers.ToArray();
    }
}

java script code

$(function () {
    $("[id$=txtTest]").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '<%=ResolveUrl("~/AutocompleteSingle.asmx/GetServices") %>',
                    data: "{ 'prefix': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.split('-')[0],
                                val: item.split('-')[1],
                                val: item.split('-')[2]
                            }
                        }))
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            },
            select: function (e, i) {
                $("[id$=hfServiceId]").val(i.item.val);
                $("[id$=txtRate]").val(i.item.val);
            },
            minLength: 1
        });
    });

code behind:

protected void Insert(object sender, EventArgs e)
{
    string serviceId = Request.Form[hfServiceId.UniqueID];   // getting rate field value
}

Answer 1

Here

                        return {
                            label: item.split('-')[0],
                            val: item.split('-')[1],
                            val: item.split('-')[2]
                        }

you create an object with two properties with the same name, rewriting the value of the first with the value of the second. Try to name them differently.