AutoComplete Textbox

Here you are the steps to follow if you need to make a Auto-Complete Textbook. We are used to display the Employees in a Drop Down List, it takes some time from the user to find and select the desired Employee. Now it is Very Easy & Our Customer is Very Happy ๐Ÿ™‚

The solution in brief:

  • Web service to search for the desired employee and return the result.
  • Drop Down List for departments used to filter our data by department.
  • Text box for the Employee Name.
  • jquery-ui-1.8.24.custom.min.js script file used to implement the auto complete manner.

Let’s do it ๐Ÿ™‚

1. Add New WebService to you Application with name “EmployeeWebService.asmx”

[System.Web.Script.Services.ScriptService]
public class EmployeeWebService : System.Web.Services.WebService
{

[WebMethod(EnableSession = true)]
public List GetEmployees(string criteria)
{
var result = new List();
var lstDepartmentEmployees = (List)HttpContext.Current.Session["LstEmployees"];

if (lstDepartmentEmployees != null)
{
var lstEmployees = lstDepartmentEmployees.Where(e => e.Name.Contains(criteria)).ToList();
result = lstEmployees.Select(e => new KeyValuePair { Key = e.Id.ToString(), Value = e.Name }).ToList();
}

return result;
}
}

As shown above it has only one method called GetEmployees which takes one parameter called criteria (employee name to search for).

This method will search the Employee List stored in the Session and return the result as KeyValuePair list.(Key–> Id, Value–> Employee Name)

public class KeyValuePair
{
public string Key { get; set; }
public string Value { get; set; }
}

2. Add New Page with a Drop Down List , Textbox, Hidden Field and Button.

The drop down list for departments to implement employee filtration.

The text box to enter the employee name used in search process.

The hidden field used to save the selected Employee Id, we will use it in saving or display process.

The button used for just read from the hidden field to be sure it works fine.

3. Add your JQuery script code which is responsible for auto complete manner.


<script type="text/javascript">
$(document).ready(function () {
$("#TxtEmployeeName").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/WebService/EmployeeWebService.asmx/GetEmployees",
data: "{'criteria':'" + request.term + "'}",
dataType: "json",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.Value,
value: item.Value,
id: item.Key
};
}));
},
change: function (event, ui) {
$('#HFSelectedEmployeeId').val(ui.item.id);
alert($('#HFSelectedEmployeeId').val);
return false;
},
error: function (result) {
alert("Unable to load data");
}
});
},
minLength: 1,
select: function (event, ui) {
$('#HFSelectedEmployeeId').val(ui.item.id);
//alert($('#HFSelectedEmployeeId').val());
return false;
}
});
});
</script>

We will make an Ajax request to our web service method, pass to it the text to search, map the result and save the employee id in case of selection completed.

4. Don’t forget to add reference to Jquery UI script file and Css file.

<script src=”Scripts/jquery-1.8.2.min.js” type=”text/javascript”></script>
<script src=”Scripts/jquery-ui-1.8.24.custom.min.js” type=”text/javascript”></script>

<link href=”Styles/jquery-ui-1.8.24.custom.css” rel=”stylesheet” type=”text/css” />

5. Finally, Do what is needed so that you are ready to run your application.

The final result should look like the following…

Thank you, and Keep it Simple & Straightforward!

~:H}{H:~

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s