jquery ui autocomplete selected value to html label

Hi experts,

I have a asp.net web forms page.
I'm using Visual Studio 2013, C#, Sql Server 2008.
For my example I'm using the Employees table of the Northwind sql server database.

I just created an empty website and then created a page called Default.aspx
On my page i'm using a jQuery UI AutoComplete

So this is the code i currently have:

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>jQuery UI AutoComplete - Northwind Employees</title>
    <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">
        $(document).ready(function() {
            SearchText();
        });
        function SearchText() {
            $(".autosuggest").autocomplete({
                source: function(request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "Default.aspx/GetAutoCompleteData",
                        data: "{'lastname':'" + document.getElementById('txtSearch').value + "'}",
                        dataType: "json",
                        success: function(data) {
                            response(data.d);
                        },
                        select: function (even, ui) {

                            var a = ui.item.id;
                            var b = ui.item.lastname;
                            var c = ui.item.value;

                            document.getElementById("demo").innerHTML = "You selected id: " + a;
                            document.getElementById("demo2").innerHTML = "You selected firsname: " + b;


                        },
                        error: function(result) {
                            alert("Error");
                        }
                    });
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="demo" />
        <div class="ui-widget">
            <label for="tbAuto">Enter LastName: </label>
            <input type="text" id="txtSearch" class="autosuggest" />
        </div>
        <br/><br/><br/>
        <p id="demo"></p>
        <p id="demo2"></p>

    </form>
</body>
</html>

Open in new window


Default.aspx.cs

using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Web.Services;


public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    
    [WebMethod]
    public static List<string> GetAutoCompleteData(string lastname)
    {
        List<string> result = new List<string>();
   
        using (SqlConnection con = new SqlConnection("Data Source=MyServer\\SQLEXPRESS;Integrated Security=true;Initial Catalog=Northwind"))
        {
            using (SqlCommand cmd = new SqlCommand("select DISTINCT LastName from Employees where LastName LIKE '%'+@SearchText+'%'", con))
            {
                con.Open();
                cmd.Parameters.AddWithValue("@SearchText", lastname);
                SqlDataReader dr = cmd.ExecuteReader();
                while (dr.Read())
                {
                    result.Add(dr["LastName"].ToString());
                }
                return result;
            }
        }
    }  

}

Open in new window


When I run my page it looks like this:

The autocomplete works just fine. So if i start typing a last name it gives me the suggestions.

running my page
So for example if I pick Dodsworth then my chose selection is placed in the autocomplete textbox like this:

after i choose a lastname from the suggestions

So here is my question:

How do I  show the EmployeeID and LastName of the item I chose in my autocomplete on my page?
I'm not sure of the right syntax i need to use?.

I would want it to look like this:

desired labels on my page
LVL 1
maqskywalkerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
I actually wrote an article on my blog about this some years ago:
http://www.instanceofanobject.com/2011/01/jquery-ui-autocomplete-with-id.html

You should read the whole thing there but the main piece of code for you should be this:
var req = [
  {"label":"item 1", "value":"item 1", "id": 1}, 
  {"label":"item 2", "value":"item 2", "id": 2}, 
  {"label":"item 3", "value":"item 1", "id": 3}];

$('#txtRequestor').autocomplete({ 
     source: req,
     change: function (event, ui) { alert(ui.item.id); } });

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.