In this article I will explain with an example, how to use jQuery ImageAutoComplete plugin in ASP.Net using C# and VB.Net.
Note: jQuery ImageAutoComplete is now depreciated. The jQuery AutoComplete will be used to display 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
 
 

Images

The Image for the jQuery AutoComplete TextBox will be saved in the photos Folder (Directory) of ASP.Net Project.
Using jQuery ImageAutoComplete Plugin in ASP.Net
 
 

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 returned list of employees 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 label and value 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 two DIVs, one for displaying the Employee Name and other for displaying the Image.
Note: The Employee Name is set with the value the label property and the src attribute of the Image element is set with the value property.
 
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)

The WebMethod accepts jQuery AutoComplete TextBox value as a parameter.
Inside the WebMethod, 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

Using jQuery ImageAutoComplete Plugin 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