Loading large dataset

[DanceParty]

I am returning a collection that is really hard for me to limit (employee names) which is around 900 items. After loading this, the app completely slows down. This was not an issue when using a normal dropdown but with the select it is not usable at all.

Any help is greatly appreciated.

[MichalW]

You should use: optionsMethod

[DanceParty]

Alright, I am getting a little stuck on how to use this for my specific form.

• I have a collection Employees that has attributes firstName, lastName, companyNo.

• The options for Employee is determined on which companyNo is selected in the previous field.

Here is some sample code from what I am trying to do:

employee.html the two fields in play here, employee and company where company affects what displays in the employee field

{{> afQuickField name="Company" type="universe-select" options=companyOptions}}
{{> afQuickField name="Employee" type="universe-select" options=employeeOptions optionsMethod=meteorMethod}}

employee.js get the value from "Company" and use it to filter the results of Employees. Pass that through the Meteor Method and return the result for the helper

Template.equipment_createnew.helpers({
  meteorMethod() {
    const company = AutoForm.getFieldValue("Company");
    let employeeArray = Employees.find({ PRCo: Number(company) }).map((x) => {
            return {
                label: `${x.LastName}, ${x.FirstName}`,
                value: x.Employee,
        };
    });
    Meteor.call('getOptions', employeeArray, (err, res) => {
      if (!err) {
        return res;
      }
      //console.log(err)
    });
  },
});

meteorMethod.js almost copy pasted from the example

Meteor.methods({
  getOptions(options) {
    this.unblock();
    let searchText = options.searchText;
    let values = options.values;
    console.log("search variable: ", searchText);
    console.log("values variable: ", values);

    if (searchText) {
      console.log("searchText: ", Employees.find({ FirstName: {$regex: searchText } }, { limit: 10 }).fetch())
      return Employees.find({ FirstName: {$regex: searchText } }, { limit: 10 }).fetch();
    } else if (values.length) {
      console.log("searchText: ", Employees.find({ Employee: { $in: values } }).fetch())
      return Employees.find({ Employee: { $in: values } }).fetch();
    }
    return Employees.find({}, { limit: 25 }).fetch();
  }
})

Right now I am getting nothing showing in the Employee field.

• console.log(searchText) returns undefined
• console.log(values) returns function values() { [native code] }

EDIT: I have tried leaving out the options as well {{> afQuickField name="Employee" type="universe-select" optionsMethod=meteorMethod}}

[MichalW]

Please look at demo: https://github.com/vazco/meteor-universe-autoform-select-demo/blob/master/universe-select.js#L78

Please try some like this:

{{> afQuickField name="Employee" type="universe-select" optionsMethod="getOptions"}}

[DanceParty]

I tried that as well with no success {{> afQuickField name="Employee" type="universe-select" optionsMethod="getOptions"}}

[DanceParty]

It is working almost as intended. Issue now is that all of the returns are giving

invalid option Object {_id: "oLAcrSwYmeT7FR", Company: 1, Employee: 111, LastName: "Doe", FirstName: "John"…}

Any idea?

[MichalW]

In method getOptions you should return like this:

return Employees.find({}, { limit: 25 }).map(function (e) {return {label: e.FirstName+' '+e.LastName, value: e._id};});

[DanceParty]

I got this solved with the solution you posted (thanks 👍 ) but now trying to figure something else out. Will post in the proper issue though.