I am trying to create JQuery AutoComplete,where source object will be get from database.
I have using JQuery $Ajax and ASP.NET WebService.I have checked in firebug console it returns JSON object but I cant get JavaScript Object from that.
My WebService Function
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public ArrayList GetClientStuffAndAdmin( int StuffID )
{
var MailToList = new ArrayList();
var db = new WooskieDBInstance().WooskieDB;
(from e in db.EMPLOYEEs
join ept in db.EMPLOYEE_PROJECT_TASKs
on e.ID equals ept.EMPLOYEE_ID
where ept.CLIENT_ID.Equals(StuffID)
select new LookupEmployee
{
ID = e.Person.ID,
Name = e.Person.DISPLAYNAME,
PersonType = e.Person.PersonType.PersonTypeName,
PersonTypeID = e.Person.PERSONTYPEID
}).Concat(
from admin in db.Persons
where admin.PERSONTYPEID.Equals(1)
select new LookupEmployee
{
ID = admin.ID,
Name = admin.DISPLAYNAME ,
PersonType=admin.PersonType.PersonTypeName,
PersonTypeID=admin.PERSONTYPEID
}).DefaultIfEmpty()
.ToList()
.ForEach(item =>
{
MailToList.Add(item);
});
return MailToList;
}
Javascript
$(function () {
$("#txtTo").autocomplete({
source: function (request, response) {
$.ajax({
url: "/StuffProfile.asmx/GetClientStuffAndAdmin",
data: JSON.stringify({ "StuffID": clientId }),
dataType: "jsonp",
type: "POST",
contentType: "application/json; charset=utf-8",
async: true,
cache: false,
success: function (msg) {
response($.map(msg.d, function (item) {
console.log({ ID: item.ID, Name: item.Name });
return { ID: item.ID, Name: item.Name };
}));
}
});
},
focus: function (event, ui) {
console.log(ui);
$("#txtTo").val(ui.item.Name);
console.log(ui.item.Name);
return false;
},
select: function (event, ui) {
$("#txtTo").val(ui.item.Name);
$("#stuff-id").val(ui.item.ID);
console.log(ui.item);
return false;
}
}).data("autocomplete")._renderItem = function (ul, item) {
return $("<li>")
.data("item.autocomplete", item)
.append("<a>" + item.name + "</a>")
.appendTo(ul);
console.log(ui.item);
};
});
$.ajax POST retain JSON but My autocomplete is not working.It returns
{"d":[{"ID":2,"Name":"Bill","PersonType":"Employee","PersonTypeID":3},{"ID":6,"Name":"Jasson","PersonType":"Employee","PersonTypeID":3},{"ID":5,"Name":"Gissel","PersonType":"Employee","PersonTypeID":3},{"ID":2,"Name":"Bill","PersonType":"Employee","PersonTypeID":3},{"ID":1,"Name":"Ashal","PersonType":"Admin","PersonTypeID":1}]}
JSON
d
[Object {ID=2, Name="Bill", PersonType="Employee", ...}, Object {ID=6, Name="Jasson", PersonType="Employee", ...}, Object {ID=5, Name="Gissel", PersonType="Employee", ...}, 2 more...]
0
Object {ID=2, Name="Bill", PersonType="Employee", ...}
1
Object {ID=6, Name="Jasson", PersonType="Employee", ...}
2
Object {ID=5, Name="Gissel", PersonType="Employee", ...}
3
Object {ID=2, Name="Bill", PersonType="Employee", ...}
4
Object {ID=1, Name="Ashal", PersonType="Admin", ...}
Please help me what is wrong with this.