How to Implement Multi Values Autocomplete textbox in ASP.NET WITHOUT using Webservice & 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 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 tables 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 multi values Autocomplete textbox.

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>Multi value Auto Complete Textbox without using Web Service</h3>
    <table>
        <tr>
            <td>Type Company Name: </td>
            <td>
                <div class="ui-widget" style="text-align:left">
                     <asp:TextBox ID="txtCompanyName" 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 () {
            $('#<%=txtCompanyName.ClientID%>').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "Default.aspx/GetCompanyName",
                        data: "{ 'pre':'" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    CompanyName: item.CompanyName,
                                    Industry: item.Industry,
                                    json: item
                                }
                            }))
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                },
                focus: function (event, ui) {
                    $('#<%=txtCompanyName.ClientID%>').val(ui.item.CompanyName);
                    return false;
                },
                select: function (event, ui) {
                    $('#<%=txtCompanyName.ClientID%>').val(ui.item.CompanyName);
                    return false;
                },
            }).data("ui-autocomplete")._renderItem = function (ul, item) {
                return $("<li>")
                .append("<a>Company:" + item.CompanyName + "<br>Industry: " + item.Industry + "</a>")
                .appendTo(ul);
            };
        });
    </script>
        

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

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<TopCompany> GetCompanyName(string pre)
        {
            List<TopCompany> allCompany = new List<TopCompany>();
            using (MyDatabaseEntities dc = new MyDatabaseEntities())
            {
                allCompany = (from a in dc.TopCompanies
                                  where a.CompanyName.StartsWith(pre)
                                  select a).ToList();
            }
            return allCompany;
        }
        

Step-7: Run Application.