Filter match ranges for better highlighting

[dxp227]

Hey there! This is part question, part suggestion:

For the purposes of match highlighting, it seems like it could be helpful to filter individual matches.indicies based on the quality of the match.

Here is an example:

list.json

[
  {
    "title": "Old Man's War",
    "plot": "Old Man's War is about a soldier named John Perry."
  },
]

main.js

const options = {
  includeScore: true,
  includeMatches: true,
  threshold: 0,
  ignoreLocation: true,
  keys: [
    "plot"
  ]
};

const fuse = new Fuse(list, options);

const pattern = "soldier"

return fuse.search(pattern)

results

[
  {
    "item": {
      "title": "Old Man's War",
      "author": {
        "firstName": "John",
        "lastName": "Scalzi"
      },
      "plot": "Old Man's War is about a soldier named John Perry."
    },
    "refIndex": 0,
    "matches": [
      {
        "indices": [
          [
            0,
            2
          ],
          [
            8,
            8
          ],
          [
            12,
            12
          ],
          [
            14,
            15
          ],
          [
            19,
            19
          ],
          [
            25,
            31
          ],
          [
            36,
            37
          ],
          [
            40,
            40
          ],
          [
            45,
            47
          ]
        ],
        "value": "Old Man's War is about a soldier named John Perry.",
        "key": "plot"
      }
    ],
    "score": 0.11271974561755103
  }
]

Regardless of what threshold is set, we get the same set of matches.indicies, though clearly "soldier" is the best match available. If we highlight all these returned ranges, we get a mess.

Would it be feasible to filter returned matches?

[dvorakroth]

Hi!

I've just encountered this problem, and dove into the source code. It looks like the algorithm just... marks every single character that the pattern and text have in common? (search.js, line 117)

I'm not sure if it's intentional, and I'm considering forking it to change that specific behavior, for some project I'm working on that needs fuzzy search with match highlighting.

@dxp227 (or anyone else!), have you ever found a nice solution?

[dxp227]

I ended up using Lunr.js instead - IIRC, it was not as easy to use as Fuse, but was ultimately better suited to the task of highlighting.

[krisk]

Highlighting was almost meant to be a supplemental feature, and not really core to Fuse, yet somehow made its way in there at some point in the past 😄 .

The one thing to outline, in your example, is that "Old" also matches the query "soldier", since, "old" is a substring of it.

The library does provide the option minMatchCharLength to take care of that though. Let me know.

[BenJenkinson]

When I had this problem, I worked around it by sorting & filtering the indices array myself, so I could only highlight the longest match.

I found the pair of indices with the greatest difference, and then highlighted that.

In your example, that would be [25, 31] which would be "soldier".