Contenent is not showing under auto complete text box - json

Question

I am implementing auto-compete textbox using MVC 4. According to the requirement the textbox can take multiple names(here EmployeeName) separated by "," (comma). I have written the following code for the controller:
public JsonResult EmployeeList(string strEmpName)
{
List<string> list = strEmpName.Split(',').ToList();
list = list.Select(s => s.Trim()).ToList();
//Extract the term to be searched from the list
string searchTerm = list.LastOrDefault().ToString().Trim();
//Return if Search Term is empty
if (string.IsNullOrEmpty(searchTerm))
{
//return new string[0];
}
List<string> excludeEmployeeName = new List<string>();
if (list.Count > 1)
{
list.RemoveAt(list.Count - 1);
excludeEmployeeName = list;
}
var query = (EmployeeDAL.GetEmployee().Where(x => x.EmployeeName.StartsWith(searchTerm.ToString().ToUpper()))).ToList();
var myList = new List<string>();
foreach (var emp in query.ToList())
{
myList.Add(emp.EmployeeName.ToString());
}
return Json(myList, JsonRequestBehavior.AllowGet);
}
The above function is returning JSON.
Data is like:
public class EmployeeDAL
{
public static List<Employee> GetEmployee()
{
var empList = new List<Employee>
{
new Employee { EmployeeId = "E001", EmployeeName = "Alex", DepartmentId = 1 },
new Employee { EmployeeId = "E002", EmployeeName = "Alan", DepartmentId = 2 },
new Employee { EmployeeId = "E003", EmployeeName = "Johny", DepartmentId = 3 },
new Employee { EmployeeId = "E004", EmployeeName = "Joe", DepartmentId = 1 },
new Employee { EmployeeId = "E005", EmployeeName = "Thomas", DepartmentId = 3 },
new Employee { EmployeeId = "E006", EmployeeName = "Sarah", DepartmentId = 3 },
new Employee { EmployeeId = "E007", EmployeeName = "Rahul", DepartmentId = 4 },
new Employee { EmployeeId = "E008", EmployeeName = "Raman", DepartmentId = 1 },
new Employee { EmployeeId = "E009", EmployeeName = "Mandy", DepartmentId = 2 },
new Employee { EmployeeId = "E010", EmployeeName = "Rohit", DepartmentId = 4 },
new Employee { EmployeeId = "E011", EmployeeName = "Sanjay", DepartmentId = 1 },
new Employee { EmployeeId = "E012", EmployeeName = "Abhi", DepartmentId = 3 },
new Employee { EmployeeId = "E013", EmployeeName = "Martin", DepartmentId = 1 },
new Employee { EmployeeId = "E014", EmployeeName = "Robin", DepartmentId = 2 },
new Employee { EmployeeId = "E015", EmployeeName = "Rohit", DepartmentId = 1 },
new Employee { EmployeeId = "E016", EmployeeName = "William", DepartmentId = 3 },
new Employee { EmployeeId = "E017", EmployeeName = "Sourav", DepartmentId = 2 },
new Employee { EmployeeId = "E018", EmployeeName = "Alex", DepartmentId = 2 },
};
return empList.ToList();
}
}
In view I have written the following script:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
SearchText();
});
function SearchText() {
$("#txtEmployeeName").autocomplete({
source: function(request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Employee/EmployeeList",
data: "{'strEmpName':'" + extractLast(request.term) + "'}",
dataType: "json",
success: function(data) {
response(data.d);
},
error: function(result) {
alert(result.responseText);
}
});
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
$("#txtEmployeeName").bind("keydown", function (event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).data("autocomplete").menu.active) {
event.preventDefault();
}
})
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
}
</script>
When I run the application and debug the json script using firebug, I can see the data is coming rightly according the letter I type in the text box (txtEmployeeName) but is not showing in the browser window. I have given the total script so that any one can run it.
Any help will be thankfully accepted.