sickdyd / react-search-autocomplete

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

If change keys props dont work #7

Closed revl94 closed 3 years ago

revl94 commented 3 years ago

const fuseOptions = {

    useExtendedSearch: true,
    keys: [ 
        'title'
    ]
  }

I try to do that and dont work for me... plis help!``

        `<div style={{ minWidth: 400 }}>
                            <ReactSearchAutocomplete
                                fuseOptions={ fuseOptions }
                                items={data}
                                onSearch={handleOnSearch}
                                onSelect={handleOnSelect}
                                onFocus={handleOnFocus}
                                autoFocus
                                styling={{
                                    fontSize: "none",
                                    fontFamily: "Roboto, sans-serif",
                                  }}
                            />
                        </div>`
sickdyd commented 3 years ago

@revl94 I'm looking into it right now. I will reply as soon as I have a fix for this.

sickdyd commented 3 years ago

@revl94 I made an update, the latest version is now 2.0.4.

To fix your issue:

  1. update react-search-autocomplete to the version 2.0.4
  2. pass resultStringKeyName="title" as a prop

You can find a complete example in the demo - source code

From the updated docs:

  fuseOptions,
  // To know more about fuse params, visit https://fusejs.io/
  //
  // By default set to:
  // {
  //   shouldSort: true,
  //   threshold: 0.6,
  //   location: 0,
  //   distance: 100,
  //   maxPatternLength: 32,
  //   minMatchCharLength: 1,
  //   keys: [
  //     "name",
  //   ]
  // }
  //
  // `keys` represent the keys in `items` where the search will be
  // performed.
  //
  // Imagine for example that I want to search in `items` by `title`
  // and `description` in the following items, and display the `title`;
  // this is how to do it:
  //
  //   const items = [
  //     {
  //       id: 0,
  //       title: 'Titanic',
  //       description: 'A movie about love'
  //     },
  //     {
  //       id: 1,
  //       title: 'Dead Poets Society',
  //       description: 'A movie about poetry and the meaning of life'
  //     }
  //   ]
  //
  // I can pass the fuseOptions prop as follows:
  //
  //   <ReactSearchAutocomplete
  //     items={items}
  //     fuseOptions={{ keys: ["title", "description"] }}
  //     // necessary, otherwise the results will be blank
  //     resultStringKeyName="title"
  //   />
  //
  resultStringKeyName,
  // The key in `items` that contains the string to display in the
  // results
revl94 commented 3 years ago

Thank you! works perfectly!! 👍 :)