Create Autocomplete Using Ajax and jQuery

Prerequisites

• Web Methods in ASP.NET
• JavaScript
• jQuery
• Ajax using jQuery
• HTML
  

Here I have implemented Auto Complete using jQuery Ajax and Web Methods.

For a better understanding I have divided the article into the following 5 parts:

1. HTML
2. Web Method
3. Ajax (Sync)
4. Rendering HTML with Data
5. Hi-lighting the typed text

 

1 HTML

First  we start with the HTML. Here I am using a TextBox as my input. That is obvious, but with an attribute autocomplete="off". When the autocomplete is on, the browser automatically completes values based on values that the user has entered before which is undesirable in this case, hence we switch it off.

 

Now to display the data to be Auto-Completed I have used the HTML tag <ul> as in the following:

<div>
     <asp:TextBox runat="server" ClientIDMode="Static"   ID="txtCustomer" list="CustomerList" Style="height: 25px; width: 264px;" autocomplete="off" />
        <ul class="autocomplete autocomplete1" id="ddlItem">
        </ul>
</div>

2  Web Methods

Here I have made a Web Method called GetData(). By declaring the function as a WebMethod we are exposing the Server-Side function such that the method can be called from a remote web client.

 

Note

A The scope of method should be Public

B The methods should be declared static

(Or else you won't be able to call the method )

[WebMethod]
    public static string GetData()//method that is called in the Ajax returns JSON String
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("Name");
        dt.Rows.Add("Ajith");
        dt.Rows.Add("Arun");
        dt.Rows.Add("Suraj");
        dt.Rows.Add("Pankaj");
        dt.Rows.Add("Yogesh");
        return ConvertDataTabletoString(dt);
    }

    public static string ConvertDataTabletoString(DataTable dt) //Function Used to convert DataTable to Json String
    {
        System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
        Dictionary<string, object> row;
        foreach (DataRow dr in dt.Rows)
        {
            row = new Dictionary<string, object>();
            foreach (DataColumn col in dt.Columns)
            {
                row.Add(col.ColumnName, dr[col]);
            }
            rows.Add(row);
        }
        return serializer.Serialize(rows);

    }

 

3 AJAX

Here I am making a Synchronous Ajax call to a web method created above. Here I emphasize that I am making a Synchronous Ajax because, setting async to false means that the statement we are calling must complete before the next statement in your function can be called. If you set async: true then that statement will begin it's execution and the next statement will be called regardless of whether the async statement has been completed. The browser freezes until the time the Ajax call is completed.

 

$.ajax({
          type: "POST",//Post Method
          url: 'Default.aspx/GetData',//URL
          data: '{}',
          async: false,//synchronous Call
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function (response) {  //callback function on Success
              BindCustomerData(response.d);
          },
          failure: function (response) {
              alert(response.d);  //alerts on failure
          }
      });

4 Rendering HTML with Data

On Success the Ajax calls a Call Back function BindCustomerData that fills the <ul> with data in the form of <li>.

Now that we have loaded the data from the web method on the form to the <ul> in its HTML, all we need to do is to hide all the unmatching data and show the matching data.

How I have implemented it you can find it in the code given below.

 

5 Hi-lighting the typed text

By now the auto-complete had almost started working. But still, I found something missing. I wacked my head for nearly 2 days and got nothing, then a colleague of mine gave me the idea of Hi-lighting the text being typed in the TextBox and he suggested me to use a jQuery plugin jQuery.highlight.js that he used to Hi-light matching text in a GridView.

Now using this JavaScript hi-lighting the text is as simple as the syntax given below.

$(this).unhighlight();//To unhighlight
$(this).highlight($('#txtCustomer').val());//To highlight the text that is being typed

Complete Code

$(document).ready(function (jQuery) {
            $.ajax({
                type: "POST",//Post Method
                url: 'Default.aspx/GetData',//URL
                data: '{}',
                async: false,//synchronous Call
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    BindCustomerData(response.d);
                },
                failure: function (response) {
                    alert(response.d);
                }
            });

            $('#txtCustomer').keyup(function () {
                if ($(this).val() == '') {
                    $("#ddlItem > li").hide(); // Hides all <li> if the input text is blank
                    BindCustomerData();
                }
                else {
                    var filter = $(this).val();  //gets value of the textbox in var filter
                    //now using .each() we search for text in <li> matching text in var filter
                    $("#ddlItem li").each(function () {
                        //the .search() is a javascript function which returns the postion where the match is found
                        //the new RegExp(filter, "i") is a Regular Expression Filter which helps in filtering text on the
                        //bases of the match found in var filter and the <li>
                        //The "i" in RegExp(filter, "i") denotes that the filter is case-insensitve (won't check the case of text)

                        //you could also use "gi" which perform a global match (find all matches rather than stopping after the first match)
                        //So if the search find a match it will return value greater than -1
                        if ($(this).text().search(new RegExp(filter, "gi")) < 0) {
                            $(this).hide();//Hides the <li>
                        } else {
                            $(this).show();//Shows the <li>
                            $(this).unhighlight();//Initally unhighlight
                            $(this).highlight($('#txtCustomer').val());//To highlight the text that is being typed
                        }
                    });
                }
            });
        });

        function BindCustomerData(data) {
            var ddl = $('#ddlItem').get(0);//Get HTML Element <ul> with ID ddlItem
            data = JSON.parse(data);  //parse Data string into Json
            ddl.innerHTML = ""; //Removes all <li> in <ul>
            var opt = "";
            for (var i = 0; i < data.length; i++) {
                opt += "<li onclick='javascript:SelectEvent(\"" + data[i].Name + "\");' >" + data[i].Name + "</li>";  //Create <li> to be added in <ul>
            }
            ddl.innerHTML = opt;
        }

        //this function is invoked when a particular <li> is clicked
        function SelectEvent(name) {
            //the function accepts the value to be add to the textbox in its parameter
            $('#txtCustomer').val(name);
            $("#ddlItem > li").hide();//once the value of the textbox is changed all <li>'s are hidden
        }

So here we have finished making an Autocomplete TextBox.

 

Please do not forget to provide your valuable suggestions and feel free to ask queries.

 

That's all for this article, will see you in some other article. Until then,

 

Keep Learning...