How to Implement Multi Values Autocomplete textbox in ASP.NET WITHOUT using Webservice & AJAX autocomplete extender.

Sunday, December 01, 2013 Sourav Mondal Autocomplete | Jquery

Introduction

In the previous article, I have explained how to implement Simple autocomplete textbox application using jQuery AutoComplete Widget. Today I will show you how to implement multi-values autocomplete textbox 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 highlights 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 autocompleteextender control and webservice, which can make it complex especially to beginners.

Today I will show you, how to implementing Multi-values autocomplete textbox in ASP.NET without using Webservice & AJAX autocompleteextender control.

Here I have done following

Simple autocomplete textbox application using jQuery AutoComplete Widget.
Multi-values autocomplete textbox.
Autocomplete textbox with 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 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;
        }