[VUE] Full text search in dropdowns

[swill]

We have drop downs in the Calendar Event creation window which we fill with a Project and a Task for each calendar entry. Below is a snippet of that code.

What we are trying to figure out how to add "full text search" to the dropdown fields. Right now, if you start typing, you have to start typing the first characters of the target option for it to show up. This is not intuitive for our users and we would like to make these dropdowns full text searchable. So if a project is named "XYZ - Company - Kubernetes", we want to be able to start typing "kuber" and have this option project returned in the list of possible projects.

Can anyone here provide guidance for how I would go about adding this functionality?

eventEditFeature: {
    modal: false,
    autoClose: false,
    items: {
      nameField: {
        label: 'Description'
      },

  resourceField: {
    label: 'Project',
    listeners: {
      change: null
    },
  },

 taskSelector : {
    name  : 'taskId',
    type  : 'taskSelector',
    label : 'Task',
    editable : true,
    weight : 210
  },

  recurrenceCombo: {
    disabled: true,
  },
  allDay: false,

  resourceChipSelector: {
    name  : 'resourceId',
    type  : 'resourceChipSelector',
    label : 'Recent Projects',
  }
},
  },

[mats]

Try https://bryntum.com/docs/grid/#Core/widget/Combo#config-primaryFilter

resourceField: {
    label: 'Project',
    primaryFilter : { operator : '*' }, // Set to match any part of the string
    listeners: {
      change: null
    },
  },

[swill]

This did not work. Now nothing I type will show a result. What am I missing?

[swill]

Based on the link you provided, I was able to find a solution. The following worked for me to do full text searching.

resourceField: {
        label: 'Project',
        primaryFilter: {
          filterBy(record) {
            if (this.value == null) {
              return true;
            }
            const value = this.value.toLowerCase();
            return record.name.toLowerCase().includes(value);
          }
        },
        listeners: {
          change: null
        },
      },

[Animal]

Try https://bryntum.com/docs/grid/#Core/widget/Combo#config-primaryFilter

resourceField: {
    label: 'Project',
    primaryFilter: {
        operator: '*'
    }, // Set to match any part of the string
    listeners: {
        change: null
    },
},

If that resourceField is a Combo, and has the default caseSensitive config left as false, then
this should work by overriding the default operator used by the primaryFilter. I just increased our test coverage to test that when that is done in Combo, it does then use match any to match the value.

You didn't also override the change listener to null did you?

[Animal]

In fact I just changed the bigdataset example to show this and it worked.

https://www.bryntum.com/examples/calendar/bigdataset/

Use the code editor as in the picture to configure the resourceField of the eventEdit feature's items:

Screenshot 2021-02-24 at 14.13.51.png (194.44 KiB) Viewed 7 times