Return to Snippet

Revision: 52591
at October 27, 2011 03:57 by lance


Initial Code
$(function () {
            $("#<%=hdnSuspectID.ClientID%>").val('0');
            $("#<%=txLName.ClientID%>").val('');
            $("#<%=txFName.ClientID%>").val('');

            $("#<%=txLName.ClientID%>").autocomplete({
                source: 'Search.ashx',
                minLength: 1,
                delay: 0,
                select: function (event, ui) {
                    var suspect = ui.item.value.split(' ');
                    $("#<%=hdnSuspectID.ClientID%>").val(suspect[0]);
                    $("#<%=txLName.ClientID%>").val(suspect[1]);
                    $("#<%=txFName.ClientID%>").val(suspect[2]);
                    return false;
                }
            })
            .data("autocomplete")._renderItem = function (ul, item) {
                var suspect = item.value.split(' ');

                return $("<li></li>")
                   .data("item.autocomplete", item)
                   .append("<a>" + suspect[1] + " " + suspect[2] + "</a>")
                   .appendTo(ul);
            };

        });


IHttpHandler:
<%@ WebHandler Language="C#" Class="Search" %>

using System;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
using System.Text;
using System.Web.Script.Serialization;
using System.Collections.Generic;


public class Search : IHttpHandler {
    
    public void ProcessRequest(HttpContext context)
   {
       List<string> names = new List<string>();
       context.Response.ContentType = "application/json";
        string prefixText = context.Request.QueryString["term"];
        using (SqlConnection conn = new SqlConnection())
        {
            conn.ConnectionString = ConfigurationManager.ConnectionStrings["CMAjax"].ConnectionString;
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = "select top 10 SuspectID, LName, FName from Suspect where LName like @SearchText + '%'";
                cmd.Parameters.AddWithValue("@SearchText", prefixText);
                cmd.Connection = conn;
                conn.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        names.Add(sdr["SuspectID"].ToString() + ' ' + sdr["LName"].ToString() + ' ' + sdr["FName"].ToString());
                    }
                }
                conn.Close();
                JavaScriptSerializer s = new JavaScriptSerializer();
                string json = s.Serialize(names);
                context.Response.Write(json);
                context.Response.End(); 
            }
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

Initial URL

                                

Initial Description
Only display the name in the search box but get the ID of the record and place it in a hidden field. When select is fired then fill form fields including the hidden field.

Initial Title
JQuery autocomplete with custom display and fill form

Initial Tags

                                

Initial Language
jQuery