In this article I will explain with an example, how to implement jQuery AutoComplete with Text and Image in ASP.Net using C# and VB.Net.
The jQuery AutoComplete will be configured to display Text and Image by creating custom AutoComplete Item.
 
 

Database

Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Download and install Northwind Database
 
 

HTML Markup

The HTML Markup consists of following controls:
TextBox – For capturing user input.
Button – For displaying selected data.
The Button has been assigned with an OnClick event handler.
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="Submit" />
 
 

Implementing AutoComplete Plugin with Images

Inside the HTML, the following CSS file is inherited.
1. jquery-ui.css
And then, the following JS Scripts files are inherited.
1. jquery.min.js
2. jquery-ui.js
Inside the jQuery document ready event handler, the jQuery AutoComplete plugin has been applied to the TextBox.
The jQuery AutoComplete plugin has been assigned with the following properties and functions.
Properties:
minLength – For setting minimum character length needed for suggestions to be rendered. Here it is set to 1.
 
Functions:
source – Inside this function, a jQuery AJAX call is made to the GetEmployees WebMethod (PageMethod) and the list of employees returned from the WebMethod (PageMethod) which acts as a source of data to the jQuery AutoComplete.
The data received from the server is processed inside the jQuery AJAX call Success event handler and path of the Image file and Name of the employee are set as value and label respectively.
 
create – Inside the function, the jQuery AutoComplete plugin has been assigned with a renderItem function, inside which an HTML i.e. Unordered List (UL) is generated.
The HTML consist of DIV consisting of Image element whose src property is set with the value set inside the success event handler.
And HTML also consists of another DIV which will be used for displaying the Name of the employee.
Finally, the generated Unordered List is assigned to the LI tag which is ultimately returned.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=txtSearch]").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: 'Default.aspx/GetEmployees',
                    data: "{ 'prefixText': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.split('-')[0],
                                val: item.split('-')[1]
                            }
                        }))
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            },
            minLength: 1,
            create: function () {
                $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                    var items = $('<div class="container">'
                        + '<div class="item"><img class="image" src="' + item.val + '" /></div>'
                        + '<div class="item">&nbsp;&nbsp;' + item.label + '</div><br /><br />'
                        + '</div>');
                    return $("<li>").append(items).appendTo(ul);
                }
            }
        });
    });
</script>
 
 

WebMethod (PageMethod)

Inside the WebMethod, the TextBox value is fetched which will be used for searching related record in database table.
Then, the connection is read from Web.Config file and a connection to the database is established using the SqlConnection class.
Note: For more details on how to read connection string from Web.Config file, please refer my article Read or Write Connection Strings in Web.Config file using ASP.Net using C# and VB.Net.
 
And the SELECT query along with the TextBox value is passed as parameter to SqlCommand class object.
After that, using ExecuteReader method of SqlCommand class, the records are fetched from the database and stored into a Generic List collection of string type.
Finally, the Generic List collection is converted into an Array and returned to jQuery AJAX call.
C#
[WebMethod]
public static string[] GetEmployees(string prefixText)
{
    List<string> employees = new List<string>();
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    string sql = "SELECT EmployeeId, FirstName, LastName FROM Employees WHERE FirstName LIKE @SearchText + '%'";
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(sql, con))
        {
            cmd.Parameters.AddWithValue("@SearchText", prefixText);
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    employees.Add(string.Format("{0} {1}-photos/{2}.jpg", sdr["FirstName"], sdr["LastName"], sdr["EmployeeId"]));
                }
            }
            con.Close();
        }
    }
 
    return employees.ToArray();
}
 
VB.Net
<WebMethod>
Public Shared Function GetEmployees(prefixText As String) As String()
    Dim customers As New List(Of String)()
    Dim constr = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim sql = "SELECT EmployeeId, FirstName, LastName FROM Employees WHERE FirstName LIKE @SearchText + '%'"
    Using con As New SqlConnection(constr)
        Using cmd As New SqlCommand(sql, con)
            cmd.Parameters.AddWithValue("@SearchText", prefixText)
            con.Open()
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                While sdr.Read()
                    customers.Add(String.Format("{0} {1}-photos/{2}.jpg", sdr("FirstName"), sdr("LastName"), sdr("EmployeeId")))
                End While
            End Using
            con.Close()
        End Using
        Return customers.ToArray()
    End Using
End Function
 
 

Displaying selected value using C# and VB.Net

When the Submit Button is clicked, the value of the TextBox is fetched from the Request.Form collection and displayed in JavaScript Alert MessageBox using RegisterStartupScript method.
C#
protected void Submit(object sender, EventArgs e)
{
    string name = Request.Form[txtSearch.UniqueID];
    ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('" + name + "');", true);
}
 
VB.Net
Protected Sub Submit(sender As Object, e As EventArgs) Handles btnSubmit.Click
    Dim name As String = Request.Form(txtSearch.UniqueID)
    ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('" & name & "');", True)
End Sub
 
 

Screenshot

Implement jQuery AutoComplete with Text and Image in ASP.Net
 
 

Browser Compatibility

The above code has been tested in the following browsers.
Microsoft Edge  FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 

Downloads

Download Code