Match label and displayLabel in auto completion

v6
1

Hey everyone,

I’m currently working with the auto-completion plugin, and I’ve configured it to display both labels and display labels. Here’s an image for reference:

Screenshot 2024-03-21 at 2.19.49 PM

However, I’ve noticed that the auto-completion only matches the labels and not the display labels. For instance, if a field has a display label like “Heartbeat Rate” but is labeled as “HR” in the code, it doesn’t recognize it when I type Heart. It only recognizes the label “HR”.

I’m curious if it’s possible to tweak the matching algorithm to also consider the display labels alongside the labels. Has anyone attempted this before? Alternatively, if incorporating displayLabel support is complex, could we achieve a similar outcome using the info or detail property so that matching done against 2 props?

Any insights or suggestions would be greatly appreciated.

Thanks,

CodeSandbox demo:
https://codesandbox.io/p/sandbox/codemirror-auto-completion-mjvwky

2

My current solution is to set filter to false and filter the results manually:

    const filteredOptions = options.filter(({ displayLabel, label }) => {
      const searchText = word.text.toLowerCase();
      const matchedLabelIndex =
        displayLabel?.toLowerCase().indexOf(searchText) ?? -1;
      let matchedValueIndex = label.toLowerCase().indexOf(searchText);
      return matchedLabelIndex > -1 || matchedValueIndex > -1;
    });

However, with this I lose the advanced search mechanism and the partial keyword underlining treatment. If there’s a way to run the same keyword search on both the label and value that would be even better.

3

The label is the thing that’s matched against, that’s just how this package works. You can still make the completion do something that doesn’t just insert the label by overriding apply, but I don’t want to start matching other fields against the source text.

4

Makes sense. Thanks for making the interface flexible enough to allow for such modifications. I did make use of the apply option as well. Is the fuzzy search an option to separately utilize instead of the plain array.filter()?