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?
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.