How to use AutoComplete TextBox inside Modal Popup using C# in ASP.Net

Hi micah,

I have created sample code by referring the below link which full-fill your requirement.

http://www.aspforums.net/Threads/181421/Adding-image-to-AutoComplete-result-using-jQuery-in-ASPNet/?p=2

HTML

<form id="form1" runat="server">
<br />
<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.autocomplete.js" type="text/javascript"></script>
    <link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .popup
        {
            position: relative;
            top: 7px;
            width: 60%;
        }
        .modal-body
        {
            height: 110px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var j = 0
            $("#<%=txtSearch.ClientID%>").autocomplete("Search_CS.ashx", {
                formatItem: function (data, i, n, value) {                                           
                if( n > 0 && n < 5)
                {                   
                    $('.modal-body').css("height", 110 * n);                   
                }
                else
                {
                $('.modal-body').css("height", 110 * 5);       
                }
                  return "<div id='divDynamic' style='position:relative;'><img style = 'width:50px;height:50px' src='photos/" + value.split("-")[1] + "'/> " + value.split("-")[0] + "</div>";
                },
                formatResult: function (data, value) {                               
                    return value.split("-")[0];
                },
                    
            });
        });

        function OnsetHeight(val) {
            if (val.value.length == 0) {
                $('.modal-body').css("height", "110px");
            }
        }
    </script>
</div>
<input class="clickable filter" class="form-control" placeholder="Search" data-toggle="modal"
    data-target="#myModal" />
<div id="myModal" class="modal overlay" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog popup">
        <div class="modal-content">
            <div class="modal-body">
                <div class="input-group">
                    <input type="text" class="form-control" id="txtSearch" runat="server" onkeyup="OnsetHeight(this)"
                        aria-label="...">
                    <div class="input-group-btn">
                        <button type="button" style="float: right;" class="btn btn-danger" data-dismiss="modal">
                            <i class="glyphicon glyphicon-search"></i>Search</button>
                    </div>
                </div>
                <div style="padding: 15px;">
                    <button type="button" style="float: right; background-color: #444; color: White;"
                        class="btn btn-default" data-dismiss="modal">
                        Close</button>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
</form>

Search_CS.ashx

<%@ WebHandler Language="C#" Class="Search_CS" %>

using System;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
using System.Text;

public class Search_CS : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        string prefixText = context.Request.QueryString["q"];
        using (SqlConnection conn = new SqlConnection())
        {
            conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = "SELECT UserName,ImageName FROM Users WHERE UserName like @SearchText + '%'";
                cmd.Parameters.AddWithValue("@SearchText", prefixText);
                cmd.Connection = conn;
                StringBuilder sb = new StringBuilder();
                conn.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        sb.Append(string.Format("{0}-{1}.jpg{2}", sdr["UserName"], sdr["ImageName"], Environment.NewLine));
                    }
                }
                conn.Close();
                context.Response.Write(sb.ToString());
            }
        }
    }

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

Screenshot