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:

HTML

Web Method

Ajax (Sync)

Rendering HTML with Data

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:

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