Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: C# ASP.NET jQuery JQueryUI , +
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.
Posted 12-Dec-12 7:45am
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Change:
return { ID: item.ID, Name: item.Name };
 
To:
return { value: item.ID, label: item.Name };
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

WebService
/// <summary>
        /// Get Client's assinged Stuff and Admin.
        /// </summary>
        /// <param name="ClientID">Client ID</param>
        /// <returns>JSON object string.</returns>
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json, XmlSerializeString = true)]
        public string GetClientStuffAndAdmin( int ClientID )
        {
            //Creat Database Connection .
            var db = new WooskieDBInstance().WooskieDB;
            //Get  Stafflist of Client .
            var Em = (from e in db.EMPLOYEEs
                      where (from ept in db.EMPLOYEE_PROJECT_TASKs
                             where ept.CLIENT_ID.Equals(ClientID)
                             select ept.EMPLOYEE_ID).Contains(e.ID)//Check Client's assinged staff .
                      select new
                      {
                          ID = e.Person.ID,
                          Name = e.Person.PERSONNAME,
                          PersonType = e.Person.PersonType.PersonTypeName,
                          PersonTypeID = e.Person.PERSONTYPEID
                      }).Concat( //Add Admin to list.
                     from admin in db.Persons
                     where admin.PERSONTYPEID.Equals(1)
                     select new
                     {
                         ID = admin.ID,
                         Name = admin.PERSONNAME,
                         PersonType = admin.PersonType.PersonTypeName,
                         PersonTypeID = admin.PERSONTYPEID
                     }).DefaultIfEmpty().OrderBy(o=>o.Name)
                     .ToList();
            //Create JSON string
            return new JavaScriptSerializer().Serialize(Em);
        }
Client Side Code
$(function () {
    $("#txtTo").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/StuffProfile.asmx/GetClientStuffAndAdmin",
                data: JSON.stringify({ "ClientID": clientId }),
                dataType: "json",
                type: "POST",
                async: true,
                cache: false,
                contentType: "application/json; charset=utf-8",
                success: function (result) {
                    response($.map($.parseJSON(result.d), function (item) {
                        return {ID:item.ID,Name:item.Name};
                    }));
                }
            });
        },
        focus: function (event, ui) {
            $("#txtTo").val(ui.item.Name);
            return false;
        },
        select: function (event, ui) {
            $("#txtTo").val(ui.item.Name);
            $("#staff-id").val(ui.item.ID);
            return false;
        }
    }).data("autocomplete")._renderItem = function (ul, item) {
        return $("<li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.Name+ "</a>")
            .appendTo(ul);
    };
 
});
 
It works Finaly
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 230
1 PIEBALDconsult 150
2 DamithSL 125
3 BillWoodruff 108
4 Garth J Lancaster 90
0 OriginalGriff 5,790
1 DamithSL 4,601
2 Maciej Los 4,012
3 Kornfeld Eliyahu Peter 3,480
4 Sergey Alexandrovich Kryukov 3,195


Advertise | Privacy | Mobile
Web01 | 2.8.141220.1 | Last Updated 13 Dec 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100