sickdyd / react-search-autocomplete

A search box that filters the provided array of objects
https://sickdyd.github.io/react-search-autocomplete
MIT License
222 stars 85 forks source link

the includeMatches of fuseOptions is not working #77

Open enzomarzo opened 2 years ago

enzomarzo commented 2 years ago

Describe the bug I am trying to use the includeMatches from the fuseOptions for highlight purpose and it's not appearing on the result set.

Codesandbox example

<ReactSearchAutocomplete
  autoFocus
  items={items}
  showIcon={false}
  resultStringKeyName="title"
  fuseOptions={{
      keys: ['title', 'category'],
      minMatchCharLength: 3,
      includeMatches: true,
  }}
  formatResult={formatResult}
  onSearch={onSearch}
/>

const formatResult = (item) => {
return (
  <span>
      {item.title} - {item.category}
      {console.log(item)}
  </span>
);

const onSearch = useCallback((value, result) => {
  console.log(value, result)
}, [])

Expected behavior The console.log (for both onSearch and for formatResult) only show me the item and does not show me the matches object. I believe when I set it to true it should bring the matches: {indices, key, value), right ?

djaffer commented 2 years ago

same I am stuck on this too.

sickdyd commented 2 years ago

@enzomarzo @djaffer

Unfortunately Fuse is just used to do the filtering, but things like includeMatches will not work (and probably other similar options). If you take a look at the code used by rsa you can see that it sets the config but just ignores everything returned except results:

  // at the top
  const fuse = new Fuse(items, options)
  fuse.setCollection(items)

  // later
  const fuseResults = (keyword: string) =>
    fuse
      .search(keyword, { limit: maxResults })
      .map((result) => ({ ...result.item }))
      .slice(0, maxResults)