Search code examples
javascriptjqueryjsonjquery-tokeninput

tokeninput not showing dropdown

Working on a custom control that fetches employee from WCF in json. Below is the code

 $("#" + txtEmployeeInput).tokenInput(urlService + '/GetEmployeesForTokenInput', {
                        prePopulate: selectedEmployeesForTokenInput,
                        preventDuplicates: true,
                        tokenLimit: 1,
                        hintText: "Type to select employees",
                        noResultsText: "No employees found!",
                        searchingText: "searching in employees...",
                        onAdd: function (item) {
                        },
                        onDelete: function (item) {
                        },
                        theme: "facebook"

                    });

Now this service

urlService + '/GetEmployeesForTokenInput'

return Employees in following format (JSON Array String)

"[{\"id\":\"4173\",\"name\":\"TAHA  SIDDIQUI\"},{\"id\":\"a1234\",\"name\":\"TAHA REHMAN SIDDIQUI\"},{\"id\":\"70007\",\"name\":\"TAHA SANDAM SIDDIQUI\"},{\"id\":\"57880\",\"name\":\"TAHA SANDAM SIDDIQUI\"},{\"id\":\"4333\",\"name\":\"TAHA  HASAN\"},{\"id\":\"555-12\",\"name\":\"TAHA REHMAN SIDDIQUI\"},{\"id\":\"49200\",\"name\":\"TAHA  -\"},{\"id\":\"1645\",\"name\":\"TAHAN A RICE\"},{\"id\":\"5253\",\"name\":\"TAHFAREN LAWRENCE OWENS\"},{\"id\":\"57881\",\"name\":\"Tahir  Ali\"},{\"id\":\"563r44\",\"name\":\"TAHIR  MALIK\"},{\"id\":\"52612\",\"name\":\"TAHIR  MUJAHID\"},{\"id\":\"34115\",\"name\":\"TAHIRA  -\"},{\"id\":\"18665\",\"name\":\"TAHIRA AQUIB HUSSAIN\"}]"

Now, the call is being made successfully, below is the screenshot that tells pretty much about the problem i am facing.

Screenshot

The dropdown is not showing. Now I suspect it is because the result is in JSON instead of a javascript array, now if that is a problem, can anyone please suggest where do I convert the string in to array in the code.

WCF Code

    [OperationContract]
    [WebGet(UriTemplate = "GetEmployeesForTokenInput?q={value}",
       ResponseFormat = WebMessageFormat.Json,
       RequestFormat = WebMessageFormat.Json,
       BodyStyle = WebMessageBodyStyle.Bare)]
    string GetEmployeesForTokenInput(string value);

public object GetEmployeesForTokenInput(string value)
    {
        WebOperationContext.Current.OutgoingResponse.Headers.Add(
"Access-Control-Allow-Origin", "*"); WebOperationContext.Current.OutgoingResponse.Headers.Add(
"Access-Control-Allow-Methods", "GET"); WebOperationContext.Current.OutgoingResponse.Headers.Add(
"Access-Control-Allow-Headers", "Content-Type, Accept");
        Employee employee = new Employee();
        employee.FullName = value;
        EmployeeManagement empMgmt = new EmployeeManagement();
        int temp;
        List<Employee> employees = empMgmt.Search(employee, 0, 0, out temp);
        var jsonData =
                from row in employees
                select new
                {
                    id = row.TRGEmpID,
                    name = row.First_Name + " " + row.Middle_Initial + " " + row.Last_Name
                };
        return (new JavaScriptSerializer()).Serialize(jsonData);
    }
Solution

  • The plugin actually expects an Array of objects with attributes id and name while I was trying to run it through a JSON string. So I modified the 

    function populate_dropdown(query, results)

    and added this just as the function starts

    results = $.parseJSON(results);