Home  »  Articles  »  AJAX  »

Create Ajax AutoComplete TextBox using jQuery in asp.net

 Posted By : Manoranjan SahooPosted Date : 17/08/2011 05:24:47 PM Category : AJAX Points : 5 (Rs 2.00)

Sometimes we need to make auto complete textbox which gives similar text as user type just like google search.

There are many ways to do this. but i am going to explain you one simple technique to achieve this goal.

Here i am going to use jQuery UI plugin to give suggestion to the textbox.

First we have to create one webpage and then add jQuery UI AutoComplete widget to the textbox which you want to give suggestion.

For this check below code for .aspx page :

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ajax AutoComplete using JQuery and WebMethod</title>
   
    <link type="text/css" href="css/custom-theme/jquery-ui-1.8.15.custom.css" rel="stylesheet" />   
        <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.15.custom.min.js"></script>
       
    <script type="text/javascript">
        $(function() {
        $("#txtName").autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "Default.aspx/GetNames",
                        data: "{ 'sname': '" + request.term + "' }",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataFilter: function(data) { return data; },
                        success: function(data) {
                                response($.map(data.d, function(item) {
                                return {
                                    value: item,
                                    result:item
                               }
                            }))
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                },
                minLength: 1
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="ui-widget">
        Enter Name To Search :
        <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
    </div>
    </form>
</body>
</html>

Then we need to WebMethod in .aspx.cs file so that we can access by AJAX call back. Let's check webmethod code for code behind window.

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Web.Services;
using System.Collections.Generic;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
       
    }
    [WebMethod]
    public static List<string> GetNames(string sname)
    {
        List<string> strNamesData=new List<string>();
        strNamesData.Add("Jitendra");
        strNamesData.Add("Manoranjan");
        strNamesData.Add("Santosh");
        strNamesData.Add("Minal");
        strNamesData.Add("Lovely");
        strNamesData.Add("Vinit");
        strNamesData.Add("Nimesh");
        strNamesData.Add("Sonal");
        strNamesData.Add("Sachin");
        strNamesData.Add("Manish");
        var namelist = strNamesData.Where(n => n.ToLower().StartsWith(sname.ToLower ()));
        return namelist.ToList();
    }

}

Now you can run and check the output.

In the above code you see that i used ajax call back to all the above webmethod. We have to keep in mind two things when using the ajax call back to call webmethods.

  • request must be a POST request
  • request’s content-type must be ‘application/json; charset=utf-8’

So, the code looks like below :

$.ajax({
           url: "Default.aspx/GetNames",
           data: "{ 'sname': '" + request.term + "' }",
           dataType: "json",
           type: "POST",
           contentType: "application/json; charset=utf-8",
           dataFilter: function(data) { return data; },
           success: function(data) {
           response($.map(data.d, function(item) {
           return {
                  value: item,
                  result:item
           }
           }))
           },
           error: function(XMLHttpRequest, textStatus, errorThrown) {
                  alert(textStatus);
           }
      });

Download Full Source Code from below link :

1. Link1

Responses
No responses found for this thread. Be the first to respond this thread.
Post Reply
Login to post Response.