Introduction

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 Autocomplete textbox in ASP.NET without using Webservice & AJAX autocompleteextender control. Here in this application, we will implement autocomplete textbox  using jQuery AutoComplete Widget.

Here I have done following

1. Simple autocomplete textbox application using jQuery AutoComplete Widget.
2. Multi-values autocomplete textbox.
3. Autocomplete textbox with image.

If you are developing your application using AngularJS, must see Implement autocomplete textbox in AngularJS

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.

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.

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>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 { value: item }
                }))
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
    }
});
});
</script>

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

[WebMethod]
[ScriptMethod(ResponseFormat= ResponseFormat.Json)]
public static List<string> GetCompanyName(string pre)
{
    List<string> allCompanyName = new List<string>();
    using (MyDatabaseEntities dc = new MyDatabaseEntities())
    {
        allCompanyName = (from a in dc.TopCompanies
                            where a.CompanyName.StartsWith(pre)
                            select a.CompanyName).ToList();
    }
    return allCompanyName;
}

Step-7: Run Application.