How to implement Autocomplete textbox with image in ASP.NET WITHOUT using Webservice and AJAX autocomplete extender.

Introduction

In the previous article, I have explained how to implement Multi-values autocomplete textbox using jQuery AutoComplete Widget. Today I will show you how to implement autocomplete text box with an image using jQuery AutoComplete Widget.

The Autocomplete textbox widget is one of the most popular jQuery UI widget, which is used for provides suggestions while user type into the input field (textbox). You noticed how the related suggestions highlight when we start typing in the Google search box, this is called autocomplete.

We can use this widget to build highly interactive web applications.

There are many examples out there demonstrating how to implement autocomplete textbox, but most of them are using Ajax autocomplete extender control and web service, which can make it complex especially to beginners.

Today I will show you, how to implementing autocomplete text box with an image in ASP.NET without using Webservice & AJAX autocompletes extender control.

Here I have done following

Simple autocomplete textbox application using jQuery AutoComplete Widget.
Multi-values autocomplete textbox.
Autocomplete textbox with the image.

Steps :

Step - 1: Create New Project.

Go to File > New > Project > Select asp.net web forms application > Entry Application Name > Click OK.

Step-2: Add a Database.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-3: Create a table for fetch data.

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.
In this example, I have used one table as below

Step-4: Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Add a Webpage and Design for implementing Autocomplete textbox with an image.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select web form/ web form using master page under Web > Enter page name > Add.

HTML Code

     <h3>Autocomplete Textbox With Image</h3>
    <table>
        <tr>
            <td>Select Country :</td>
            <td>
                <div class="ui-widget" style="text-align:left">
                    <asp:TextBox ID="txtCountryName" runat="server" width="350px" CssClass="textboxAuto" Font-Size="12px" />
                </div>
            </td>
        </tr>
    </table>

JS Code

     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>   
    <script language="javascript" type="text/javascript">
        $(function () {
            $('#<%=txtCountryName.ClientID%>').autocomplete({
                 source: function (request, response) {
                     $.ajax({
                         url: "Default.aspx/GetCountry",
                         data: "{'pre' :'" + request.term + "'}",
                         dataType: "json",
                         type: "POST",
                         contentType: "application/json; charset=utf-8",
                         success: function (data) {
                             response($.map(data.d, function (item) {

                                 return {
                                     CountryName: item.CountryName,
                                     Logo: item.Logo,
                                     json: item
                                 }
                             }))
                         },
                         error: function (XMLHttpRequest, textStatus, errorThrown) {
                             alert(textStatus);
                         }
                     });
                 },
                 focus: function (event, ui) {
                     // this is for when focus of autocomplete item 
                     $('#<%=txtCountryName.ClientID%>').val(ui.item.CountryName);
                    return false;
                },
                select: function (event, ui) {
                    // this is for when select autocomplete item
                    $('#<%=txtCountryName.ClientID%>').val(ui.item.CountryName);
                    return false;
                }
             }).data("ui-autocomplete")._renderItem = function (ul, item) {
                 // here return item for autocomplete text box, Here is the place 
                 // where we can modify data as we want to show as autocomplete item
                 return $("<li>")
                 .append("<a style='padding-left:40px; background-image:url(/CountryLogo/" + item.Logo + ");" +
                 "background-repeat:no-repeat;background-position:left center;' >" + item.CountryName + "</a>").appendTo(ul);
             };
         });
    </script>

Step-6: Write function for fetch data from database and show in Autocomplete TextBox with image .

Import this 2 Namespace

            using System.Web.Services;
            using System.Web.Script.Services;

Write this function into your page behind.

            
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static List<CountryMaster> GetCountry(string pre)
        {
            List<CountryMaster> allCountry = new List<CountryMaster>();
            using (MyDatabaseEntities dc = new MyDatabaseEntities())
            {
                allCountry = dc.CountryMasters.Where(a => a.CountryName.StartsWith(pre)).OrderBy(a => a.CountryName).ToList();
            }
            return allCountry;
        }

Step-7: Run Application.

Live Demo Download