How to use jquery autocomplete in ASP.NET?

In this article I will discuss how to use Jquery autocomplete. Before use this add Jquery a reference in your project.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

Add Text box in Layout

<input type="text" id="txtid"/>

Jquery Auto Complete Code

  $("#txtid").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        url: "WCF Service Request URL",
                        data: JSON.stringify({inputstr:request.term}),
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        success: function (rType) {                          
                            response($.map(rType, function (item) {                                    
                                     return {
                                         label: item,   //manage label value in return json
                                         value: item
                                     }
                         }));
                        },
                        error: function (e) {//handel error }
                    });
                },
                minLength: 3,
                autoFill: true,
                select: function (event, ui) {
                  
                   //On select
                },
                focus: function (event, ui) {
                    event.preventDefault();
                    // On foucs
                },
                change: function (event, ui) {
                    if (ui.item) {
                         //If Item found
                    } else {
                       //If Item not found
                    }
                },
                search: function () { //on search
                 },
                open: function () { //On Open
                }
            });

Create Service method which return JSON data for autocomplete.

 WCF  Methods

1-Service Class

  #region--Get Company Auto Complete--
    public List<Company> GetAutoComplete(string inputstr)
    {
        List<Company> CompanyData = GetCompany(inputstr));
        return CompanyData;
    }
    #endregion

2-IService Class

[OperationContract]
[WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Wrapped, ResponseFormat = WebMessageFormat.Json)]
List<Company> GetAutoComplete(string inputstr);

Hope you like this articles. Please give suggestion in below comments.