TextBox AutoComplete with ASP.NET and jQuery UI

Posted by: Suprotim Agarwal , on 5/27/2010, in Category jQuery and ASP.NET
Views: 439064
Abstract: This article demonstrates how to use the jQuery UI AutoComplete widget to consume an ASP.NET Web Service that is JSON Serialized.
This article demonstrates how to use the jQuery UI AutoComplete widget to consume an ASP.NET Web Service (EmployeeList.asmx) that is JSON Serialized. The data source for this web service is List<Employee> in the Employee.cs class. You can download this class from the source code attached with this article.
The Autocomplete widget is one of the widgets provided in jQuery UI and provides suggestions while you type into the field. jQuery UI is a free widget and interaction library built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.
[Note: If you are using jQuery with ASP.NET Controls, you may find my EBook 51 Recipes with jQuery and ASP.NET Controls helpful]
Let us first glance through the entire code with the jQuery UI AutoComplete widget added to the TextBox (tb)
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AutoComplete Box with jQuery</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> 
<script type="text/javascript">
$(function() {
    $(".tb").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "EmployeeList.asmx/FetchEmailList",
                data: "{ 'mail': '" + 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.Email
                        }
                    }))
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        },
        minLength: 2
    });
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<div class="ui-widget">
    <label for="tbAuto">Enter Email: </label>
     <asp:TextBox ID="tbAuto" class="tb" runat="server">
     </asp:TextBox>
</div>
</div>
</form>
</body>
</html>
Now before explaining to you how this code functions, let us go through the WebService first. Assuming you have downloaded the source code and are looking at the EmployeeList.cs/vb file, you will observe that the method has been decorated with the [WebMethod] attribute to allow calls from client script
C#
[WebMethod]
public List<Employee> FetchEmailList(string mail)
{
    var emp = new Employee();
    var fetchEmail = emp.GetEmployeeList()
    .Where(m => m.Email.ToLower().StartsWith(mail.ToLower()));
    return fetchEmail.ToList();
}
VB.NET
<WebMethod>
Public Function FetchEmailList(ByVal mail As String) As List(Of Employee)
      Dim emp = New Employee()
      Dim fetchEmail = emp.GetEmployeeList().Where(Function(m) m.Email.ToLower().StartsWith(mail.ToLower()))
      Return fetchEmail.ToList()
End Function
Here the FetchEmailList(string mail) method calls the GetEmployeeList() method on the Employee class which returns a List<Employee>. We then filter the list using the filter string (mail) passed from the UI and then return the list of emails that match the filter string.
Note: If a method is not marked with [ScriptMethod] attribute, the method will be called by using the HTTP POST command and the response will be serialized as JSON.
Going back to code we saw above, observe how the TextBox is wired to the AutoComplete widget.
 
$(function() {
    $(".tb").autocomplete({
        source: function(request, response) {
            $.ajax({
                // consume the webservice
        },
        minLength: 2
    });
});
To consume this web service using jQuery $.ajax(), two important points to note is that the request should be a POST request and the request’s content-type must be ‘application/json; charset=utf-8’. The code structure of the $.ajax() call looks similar to the following:
$.ajax({
    url: "EmployeeList.asmx/FetchEmailList",
    data: "{ 'mail': '" + request.term + "' }",
    dataType: "json",
    type: "POST",
    contentType: "application/json; charset=utf-8",
    success: function(data) {
 
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
    }
});
 
Observe how the parameter (that the user types in the textbox) is passed to the webservice using data: "{ 'mail': '" + request.term + "' }" .You may need to add additional checks to format the data or validate it. Once the Ajax method is completed, the success function will be executed and the matching results (Email) will be returned using the following code.
dataFilter: function(data) { return data; },
success: function(data) {
    response($.map(data.d, function(item) {
        return {
            value: item.Email
        }
    }))
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
    alert(textStatus);
}
Now when you browse the page and type the first 2 characters in the textbox, the jQuery UI AutoComplete widget added to the TextBox, provides suggestion that it pulls from the JSON enabled WebService as shown below
WebService
WebService_1
The entire source code of this article can be downloaded over here . I hope you liked the article and I thank you for viewing it.

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
jQuery 3 - New Features and Performance Improvements

HTML Table and jQuery – Handy Code Snippets

jQuery Event Handling Basics - Difference between Bind, Live, Delegate and On

Select / Deselect All CheckBoxes using jQuery

jQuery UI DatePicker - Tips and Tricks

jQuery TreeView with Expand Collapse Icons

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for Sixteen consecutive years. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.

Get in touch with him on Twitter @suprotimagarwal or at LinkedIn



Page copy protected against web site content infringement by Copyscape



Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by web hosting on Tuesday, June 1, 2010 8:46 AM
i really need it,,,thanx alot...
Comment posted by jquerymaster on Sunday, July 11, 2010 10:33 AM
your example shows all data and matcing performed in autocomplete dropdown.can u plz solve this question

http://stackoverflow.com/questions/3222754/jquery-autocomplete-json-return-result-from-webservice-but-it-is-not-showing-in/3222800#3222800
Comment posted by Jimmy Tong on Thursday, August 19, 2010 9:48 PM

Thanks!
Nice article
Comment posted by Steopa on Thursday, September 9, 2010 12:50 AM
Finally!  A perfect article on getting the Autocomplete to work with ASPX. This is the best article I have seen on the subject.  Thank you so much!
Comment posted by Suprotim Agarwal on Thursday, September 9, 2010 1:33 AM
Steopa: Glad you liked it!
Comment posted by James on Monday, October 4, 2010 4:54 PM
Great article.  A small but simple mistake I made was that I did not include " [ScriptService]" to the web service class.  This prevented the service from being called.
Comment posted by Ahmed on Sunday, November 7, 2010 6:00 PM
Thanks for a great article. How do you implement the "select" event handler in the example above for selecting an object from the list.
Comment posted by Great Article!!!!!!!!!!!!!! on Thursday, November 18, 2010 11:12 PM
i've been googling for days. finally, yours makes it work. thanks a lot!!!!!!!!!!!!!!!!
Comment posted by Exc ellent article on Thursday, December 9, 2010 6:16 AM
Nice article.
Novice in asp.net, vb.net
Have the following questions:
1. Do you have a vb.net source
2. Instead of web services can I use ashx. I used another autocomplete with ashx and it worked nicely

Regards,


Comment posted by Edmilson Hora on Tuesday, February 8, 2011 3:31 AM
Hi, very good article!
  I was looking for that for a while. But, I Still have one doubt, I´d like to use the autocomplete  like is  was one dropdownlist  but  without the arrow on the rigth side,  of course  it should provide  one  Value pair with  ID  and  the  Text,  I know  there is  on the autocomplete  Value  and  Label it  could be the solution,  but I loaded bolth  on autocomplete  and  during  the use  of it  the behavior  of the autocomplete  is  alteraded  it shows the  Label  and  the Value  during  the  shearch  and select  events.

  It  is  recomendaded  to use auto complete  as is  was a dropDownList?

Thanks

Edmilson
Comment posted by Martyn on Thursday, March 17, 2011 9:55 AM
Great Article, managed to adapt the code to work with master pages and postbacks :-)

Thanks again
Comment posted by asp.netnewbie@hotmail.com on Thursday, March 24, 2011 9:36 PM
how can I display the results to the page based on the search keywords from the text box with the button click?
Comment posted by Carlos Narvaez on Monday, March 28, 2011 7:22 PM
Excelent article, finally i could get the autocomplete to work. I have a question. I managed to get the EmployeeList from a database but i guess if i keep inputting different search strings i'll be submitting a new query everytime that looks the same as the previous one over and over. How could i avoid this ? thanks
Comment posted by Suprotim Agarwal on Tuesday, March 29, 2011 4:38 AM
@carloas: Not really as the results returned would be different each time a new search string is given. Alternatively for small datasets, you can cache the records, but in this case, the search will be different for each string entered.
Comment posted by Niraj on Friday, April 1, 2011 3:11 AM
I downloaded jquery.min.js & jquery-ui.min.js but it is showing the error
Error: 'jQuery' is undefined.

Please help me.
Comment posted by DIYa on Monday, April 4, 2011 8:04 AM
Thanks for writing this blog and sharing it with the world. I would like to know how to go for reading your rss blog. Please let me know if possible.
curt
<a href="http://www.nicetick.com/nike-air-royal-black-colored-base-white-purple.html">Nike Air Royal</a>
Comment posted by nebde on Thursday, April 14, 2011 12:35 AM
Great article, just wondering if this could support large data let say 8000 rows?
Comment posted by FSBarker on Tuesday, April 26, 2011 1:22 PM
After going full circle and learning a ton, came back to your article and bam, got it working in a few minutes. Thanks!
Comment posted by heronote on Thursday, June 9, 2011 2:09 AM
Free jQuery & jQuery UI eBook:

<a href="http://www.heronote.com/files/jQuery.htm">http://www.heronote.com/files/jQuery.htm</a>
Comment posted by Steve Barron on Thursday, June 16, 2011 2:58 PM
I've added some postback functionality to this at:

http://stevebarronnet.blogspot.com/2011/06/jqueryui-autocomplete-autopostback.html
Comment posted by Suprotim Agarwal on Friday, June 17, 2011 3:08 AM
Steve: Thanks for extending this and for sharing the link!
Comment posted by Denisse on Sunday, June 19, 2011 4:40 PM
Hey! Thanks for this great article. I kinda have a question for you. Can you please tell me what do I have to do so I can get the data from a database. Thanks :)
Comment posted by Denisse on Sunday, June 19, 2011 5:08 PM
Hey! Thanks for this great article. I kinda have a question for you. Can you please tell me what do I have to do so I can get the data from a database. Thanks :)
Comment posted by Steve Barron on Monday, June 20, 2011 8:24 AM
Suprotim:  Thanks for putting the original article together!  I've also been enjoying your eBook - technically, you'll find my wife as the purchaser since I used her PayPal account.   :)

Denisse:  It's all in the webservice.

In the original article, they've hard-coded the data in the webservice, as people often do in demos.

I replaced that code with my database code which went something like this...

Public Function GetList(ByVal filter As String) As List(Of Account)
        Dim dv As New DataView(Application("Accounts"), "acct_nm like '%" & filter.ToUpper & "%'", "acct_nm", DataViewRowState.CurrentRows)
        Dim ret As New List(Of Account)
        Dim x As Account
        For Each dr As DataRowView In dv
            x = New Account
            x.id = dr("acct_id").ToString
            x.name = dr("acct_nm").ToString
            ret.Add(x)
        Next
        dv.Dispose()
        x = Nothing
        Return ret
    End Function

Application("Accounts") is a DataTable which gets loaded/cached at application start time to keep the webservice call nice and speedy.

    Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs)
        Dim da As New System.Data.OleDb.OleDbDataAdapter("SELECT acct_id, acct_nm FROM  acct_lkp", "ConnectionStringHere")
        Dim ds As New System.Data.DataSet
        da.Fill(ds)
        Application("Accounts") = ds.Tables(0)
        da.Dispose()
        ds.Dispose()
    End Sub

I copy the data (for better or worse) over to a List(Of Account) because that's what Suprotim had done in the original.  I don't know if that was strictly necessary but I don't know much about JSON and wasn't sure what else to do.  The speed was pretty good, so I didn't look into it any further.  :)
Comment posted by Suprotim Agarwal on Monday, June 20, 2011 12:56 PM
Steve: Thanks for sharing your db code. I am glad you are finding the book useful!
Comment posted by Kamen on Wednesday, June 29, 2011 10:35 AM
Greate article, but i have an issue ... it workig great when the service is on the same web site, but give me an error when i put external service http://mywebsite1/EmployeeList.asmx/FetchEmailList can you help me with theis issue

Thanks in advance
Comment posted by Kame on Wednesday, June 29, 2011 10:50 AM
Sorry I figure out the issue ... need to be in the same domane 10x
Comment posted by Richard Xiong on Wednesday, July 20, 2011 5:27 PM
Please take a look of Dynamic List Field and Multi-Select List Field at: http://www.xnodesystems.com/. These are powerful ASP.NET autocomplete (searchable) drop down list encapsulated with functionalities such as auto-label, validations, autocomplete (incremental search), tooltip, and much more... They are part of this ASP.NET data entry controls suite - XField Suite.
Comment posted by Manisha Tomar on Wednesday, September 7, 2011 12:11 AM
Thanks for this Article..
This helps me alot..
Comment posted by Nitesh on Thursday, September 29, 2011 3:46 AM
this is such a good article. I got the autocomplete up and running in no time. I used LINQ in my webservice function. My BLL returns a datatable in most cases. Posting it here so it can help others:

<WebMethod()> _
    Public Function FetchBusinessAreas(ByVal area As String) As List(Of BusinessArea)
        Dim bl As New SPDIMSBL

        Return (From row In bl.GetBusinessAreasTable.AsEnumerable() _
        Let description = row.Field(Of String)("Description") _
        Where description.StartsWith(area, StringComparison.CurrentCultureIgnoreCase) _
        Select New BusinessArea(row.Field(Of Long)("BusinessAreaID"), _
                                description, _
                                row.Field(Of Boolean?)("Active"))).ToList()
    End Function
Comment posted by Bryan on Monday, October 17, 2011 12:56 PM
Thanks for this article!
If you want dynamic data for your textbox. Just refer for this post.
http://www.ezineasp.net/post/ASP-Net-Convert-SqlDataReader-to-ArrayList-using-C-sharp.aspx
Comment posted by Ed Hughes on Wednesday, November 16, 2011 8:32 AM
Great article, just what I was looking for.  I have never used JQuery before,  this article makes it easy to implement.  Is it possible to pass more than one parameter to the service (in the autocomplete function) based on the value of another textbox on the web page?
Comment posted by Marc Bauch on Thursday, November 17, 2011 12:38 AM
@edhughes: Try this http://forum.jquery.com/topic/multiple-parameters-using-jquery-ui-for-autocomplete

Comment posted by Sarvesh on Tuesday, February 28, 2012 1:26 AM
I have one Textbox and want to display more than value i.e when user type in textbox as Id should display id and user type name in textbox names should display in same textbox using JQuery AutoComplete.
Comment posted by plazzasele on Tuesday, February 28, 2012 5:16 AM
hi. this is a very nice article. i am having a problem using it. can you please see what can be wrong in my code.

<%@ Page Title="" Language="C#" MasterPageFile="admin.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="admin_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>  
   <script type="text/javascript">
       $(function () {
           $(".tb").autocomplete({
               source: function (request, response) {
                   $.ajax({
                       url: "ClientList.asmx/FetchEmailList",
                       data: "{ 'clientName': '" + 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.ClientName
                               }
                           }))
                       },
                       error: function (XMLHttpRequest, textStatus, errorThrown) {
                           alert(textStatus);
                       }
                   });
               },
               minLength: 2
           });
       });
   </script>
    <style type="text/css">
        #defaultPage
        {
            background-color: #D8D4D4;
            padding: 10px 10px 10px 10px;
            margin: 10px 10px 10px 10px;
            min-height: 50px;
            height: auto;
            text-align: right;
            direction: rtl; font-size:18px;
        }
        #defaultPage h1 {font-size:22px; width:200px;float:right; margin-right:15px;}
    </style>
</asp:Content>

ClientList.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using Model;
/// <summary>
/// Summary description for ClientList
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
// [System.Web.Script.Services.ScriptService]
public class ClientList : System.Web.Services.WebService {

    public ClientList () {

        //Uncomment the following line if using designed components
        //InitializeComponent();
    }

    [WebMethod]
    public List<Client> FetchEmailList(string mail)
    {
        var fetchEmail = GetEmployeeList()
        .Where(m => m.clientName.ToLower().StartsWith(mail.ToLower()));
        return fetchEmail.ToList();
    }
    public List<Client> GetEmployeeList()
    {
        var db = new DataClassesDataContext();
        var list = from t in db.TClients
                   select new Client
                   {
                       clientName = t.ClientName,
                       clientId = t.ClientId
                   };
        return list.ToList();
    }
}
Comment posted by Hoan Huynh on Thursday, March 15, 2012 6:39 AM
Try with Generic Handler file, example here: http://4rapiddev.com/javascript/asp-net-jquery-autocomplete-textbox/
Comment posted by Yogesh on Monday, April 23, 2012 4:45 AM
its great article ..thx buddy but can you tell me how and where i get mailId on selecting result..
Comment posted by Yogesh on Monday, April 23, 2012 4:48 AM
its great article ..thx buddy but can you tell me how and where i get mailId on selecting result..
Comment posted by Heike on Thursday, June 14, 2012 4:57 AM
Hi, just wont to say "thank you" for your great article. Worked perfectly for me :)
Comment posted by Deepak Joshi on Friday, June 15, 2012 3:27 PM
your article was big help to me. Really nice and perfect example.
Thanks a lot. -
Comment posted by Deepak Joshi on Saturday, June 16, 2012 10:32 AM
your article was big help to me. Really nice and perfect example.
Thanks a lot. -
Comment posted by EDDM Printing on Sunday, June 24, 2012 12:12 AM
GREAT Stuff about Jquery, I wanted to add autocomplete and calendar controls and I found your website very helpful. thanks a lot.

Lot of great stuff and nice hints in comments as well.

Ravi
Comment posted by Ninhovid on Friday, July 13, 2012 2:08 PM
awesome!!!
but i need the selected ID too in a hidden form
how can I get this done?
Comment posted by Ashwin on Friday, August 3, 2012 6:08 AM
The code isnt working with Firefox ... Please help!!!!
Comment posted by Suchitra on Friday, August 3, 2012 7:09 AM
Works Perfectly. Thanks so much for the accurate information provided.
Comment posted by Ana on Tuesday, August 7, 2012 9:18 AM
Didn´t work to me when I used Master Page.
Comment posted by Mehul Mehta on Friday, September 7, 2012 6:31 AM
Very useful....
Great work...
Thank you so much :)
Comment posted by Dave on Tuesday, October 23, 2012 6:53 AM
Great Article! really helpful. One thing that i noticed, though was that i needed to remove the "datafilter" or my autocomplete options would show for less than a second and then dissapear.

Many thanks for a great article (even if you did write it a long time ago.) :-)
Comment posted by Djoser on Thursday, November 1, 2012 9:53 AM
This is a great post, but I have a problem: when displaying avtokomplita have drawn list markers in all browsers except IE, can anyone knows why this happens? sorry for my english.
Comment posted by Djoser on Friday, November 2, 2012 1:29 AM
This is a great post, but I have a problem: when displaying avtokomplita have drawn list markers in all browsers except IE, can anyone knows why this happens? sorry for my english.
Comment posted by Nguyen Van Thao on Friday, November 16, 2012 7:30 PM
How do I get the value id but tbAuto still displays Email
Comment posted by Nguyen Van Thao on Friday, November 16, 2012 7:30 PM
How do I get the value id but tbAuto still displays Email
Comment posted by Nguyen Van Thao on Sunday, November 18, 2012 6:30 PM
How do I get the value id but tbAuto still displays Email
Comment posted by abeetha on Sunday, December 16, 2012 3:25 AM
@Nguyen Van Thao
add 'select:' and change 'success: ' functions as below
Further refer
http://stackoverflow.com/questions/4685010/how-to-get-selected-option-jquery-autocomplete

success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.Id,
  value: item.GroupName
   }
   }))
  },

select: function (event, ui) {
var selectedObj = ui.item;
alert(selectedObj.label);
},
Comment posted by Ricky on Wednesday, January 30, 2013 11:36 AM
Hi there I tried your article but instead of Webmethod in and asmx page. Im using a Web Method in aspx page. Here is my code

My javascript is:

        $(function () {
            $("#ctl00_ContentPlaceHolder1_txtTags").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "GuideForm.aspx/FetchTags",
                        data: "{ 'tagCaption': '" + 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.TagCaption
                                }
                            }))
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                },
                minLength: 2
            });
        });

And my WebMethod is

        [WebMethod]
        public List<Tags> FetchTags(string tagCaption)
        {
            return api.TagsLogic.GetEveryTagsLikeByCaption(tagCaption);
        }

My problem is it throws and error upon typing. My I ask what is wrong in my code. Thanks!
Comment posted by Ricky on Wednesday, January 30, 2013 11:53 AM
Hi there I tried your article but instead of Webmethod in and asmx page. Im using a Web Method in aspx page. Here is my code

My javascript is:

        $(function () {
            $("#ctl00_ContentPlaceHolder1_txtTags").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "GuideForm.aspx/FetchTags",
                        data: "{ 'tagCaption': '" + 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.TagCaption
                                }
                            }))
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                },
                minLength: 2
            });
        });

And my WebMethod is

        [WebMethod]
        public List<Tags> FetchTags(string tagCaption)
        {
            return api.TagsLogic.GetEveryTagsLikeByCaption(tagCaption);
        }

My problem is it throws and error upon typing. My I ask what is wrong in my code. Thanks!
Comment posted by Alan on Monday, February 4, 2013 3:57 PM
Hi,

works well with keyboard events? (tab, Enter)

thank you very much

sorry for my english
Comment posted by Alan on Monday, February 4, 2013 4:08 PM
Hi,

works well with keyboard events? (tab, Enter)

thank you very much

sorry for my english
Comment posted by Alan on Monday, February 4, 2013 4:09 PM
Hi,

works well with keyboard events? (tab, Enter)

thank you very much

sorry for my english
Comment posted by rajkumar on Friday, March 29, 2013 3:12 AM
thank you so much
Comment posted by Dilip Langhanoja on Friday, April 5, 2013 12:03 AM
Hi
Thanks its very useful to me and working fine in my project .

I have one query here we have used Webmethod of webservice . Is it compulsory or we have any other alternative ? and if it is compulsory then why ?

please reply me on  this post or at diliplanghanoja@gmail.com .

Thanks again ........
Comment posted by fjhggfgf on Tuesday, April 30, 2013 5:43 AM
ffgfghryffhfg
Comment posted by Connie DeCinko on Monday, August 19, 2013 5:19 PM
I've run into an issue.  The code works fine as long as you only type letters and numbers into the text box.  If I enter a single quote or other symbol, I get an error since the query fails.  How should we escape those symbols?
Comment posted by viranja on Tuesday, October 1, 2013 6:32 AM
Thanks, very useful to me..

thanks again..
Comment posted by Sudhanva on Wednesday, October 2, 2013 11:51 AM
How to handle if the number of records are lot. I am facing performance issues, as the search is yielding more than 1000 rows, the page is getting hanged for a minute before it renders 1000rows. How do avoid this, any logic I need to apply?
Comment posted by ero on Thursday, January 16, 2014 3:57 AM
Thank you so much. This was very much helpful. highly appreciated
Comment posted by tej on Wednesday, January 29, 2014 11:31 PM
Thank you so much.. It helped me a lot.. nice explaination