asked on

jquery UI Autocomplete widget select event in web forms

I'm using the jQuery UI Autocomplete inside a .aspx web forms page.
https://jqueryui.com/autocomplete/

I'm using Sql Server 2008 express.
I'm using the Employees table from the Northwind database.

So when I run my page the autocomplete works fine and it looks like this when I start typing in it:

After I pick Davolio from the autocomplete suggestions I then get this:

This is my code for my page

EmployeesByLastName.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EmployeesByLastName.aspx.cs" Inherits="jquiAutocompleteEvents.EmployeesByLastName" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            //-------------------------

            // ----- jQuery AutoComplete
            $("#txtAutoComplete").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "EmployeesByLastName.aspx/GetEmployee",
                        data: "{'term':'" + $("#txtAutoComplete").val() + "'}",
                        dataType: "json",
                        success: function (data) {
                            response(data.d);
                        },
                        select: function (event, ui) {
                            $('#txtAutoComplete').val(ui.item.LastName);
                            $('#selectedValue').text("Selected value:" + ui.item.LastName);
                            return false;
                        },
                        error: function (result) {
                            alert("Error");
                        }
                    });
                }
            });


            //-------------------------
        });

    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input type="text" id="txtAutoComplete" />
        </div>
        <div id="selectedValue"></div>
    </form>
</body>
</html>

Open in new window

EmployeesByLastName.aspx.cs

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


namespace jquiAutocompleteEvents
{
    public partial class EmployeesByLastName : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        public static string[] GetEmployee(string term)
        {
            List<string> retCategory = new List<string>();

            string ConnectionString = "Data Source=MyComputer\\SQLEXPRESS;Initial Catalog=Northwind;Integrated Security=True";

            using (SqlConnection con = new SqlConnection(ConnectionString))
            {
                string query = string.Format("select LastName, [LastName] AS value FROM Employees where LastName Like '%{0}%'", term);
                using (SqlCommand cmd = new SqlCommand(query, con))
                {
                    con.Open();
                    SqlDataReader reader = cmd.ExecuteReader();

                    while (reader.Read())
                    {
                        retCategory.Add(reader.GetString(0));
                    }
                }
                con.Close();
            }
            return retCategory.ToArray();
        }

    }
}

Open in new window

On my EmployeesByLastName.aspx page I these divs:

<div>
<input type="text" id="txtAutoComplete" />
</div>
<div id="selectedValue"></div>

and in the jquery I have this event

select: function (event, ui) {
$('#txtAutoComplete').val(ui.item.LastName);
$('#selectedValue').text("Selected value:" + ui.item.LastName);
return false;
},

So after I make a selection from the autocomplete the following text should show up on my page below the textbox:

Selected value: Davolio

But for some reason this text is not showing up after I make a selection. So my syntax is wrong somewhere.

Anyone know where my code is wrong? How do I fix it?

ASKER CERTIFIED SOLUTION

kblau

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial