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:
- 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:
- <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()
- {
- 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)
- {
- 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",
- url: 'Default.aspx/GetData',
- data: '{}',
- async: false,
- contentType: "application/json; charset=utf-8",
- dataType: "json",
- success: function (response) {
- BindCustomerData(response.d);
- },
- failure: function (response) {
- alert(response.d);
- }
- });
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();
- $(this).highlight($('#txtCustomer').val());
Complete Code
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...