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

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