Using JQuery AutoComplete with Asp.Net

This blog shows how to use AutoComplete Widget of JQuery to provide auto complete feature in Asp.Net web page.

We use AutoComplete widget in Asp.Net page to get the list of languages that match the given text in textbox from an Asp.Net Web Service.

Here is the web service called NamesServices.asmx

<%@ WebService Language="C#" Class="NamesService" %>
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Collections.Generic;
using System.Linq;

[WebService(Namespace = "http://www.tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class NamesService  : System.Web.Services.WebService {

    [WebMethod]
    public List<string> GetNames(string name) 
    {
        // for simplicity list is hard-coded
        List<string> l = new List<string> { "Java", "Ruby", "C#", "C++", "C", "JavaScript", "VB","Python","Cobol"};
        return l.Where(s => s.ToLower().StartsWith(name.ToLower())).ToList();
        
    }

}

Now, let us create a web form to get the list of languages as user enters text into textbox. This Asp.Net page uses JQuery and JQuery UI and JQuery Style sheet. Download the required files from jquery.com.

Here is the code for Asp.Net page.


<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Using AutoComplete of JQuery</title>
    <link href="jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />
    <script src="scripts/jquery-1.6.1.js" type="text/javascript"></script>
    <script src="scripts/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
           $("#txtName").autocomplete
           ({
               source: ["Joe", "John", "Jack", "Ben", "Bell", "Steve", "Scott"]  // simple list of strings 
           });

           $("#txtLanguage").autocomplete
           ({
              source:
                  function (request, response) {
                  $.ajax
                  ({
                    url: "NamesService.asmx/GetNames",
                    data: "{ 'name': '" + request.term + "' }",   // term is the property that contains the entered text
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response(data["d"]);  // property d contains list of names sent from service
                    },
                    error: function (xhr, callStatus, errorThrown) {
                        alert(callStatus);
                    }
                });
              },
              minLength: 1
           });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    Enter name: <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
    <p />
    Enter Language : <asp:TextBox ID="txtLanguage" runat="server"></asp:TextBox>
    <p />
    <asp:Button ID="Button1" runat="server" Text="Submit" />
    </form>
</body>
</html>

That's all you have to do. Run Asp.Net web page and enter some text in first text box - txtName - and you will get the list of names that match the given text.

Then enter a character into second textbox - txtLanguage - and you will get the list of laguages that match the given text. For this we call web service, NamesService.asmx, which sends a list of languages in the form of JSON string.