Data filtering in React using Lodash

I am currently making a Table component in React.js. My goal is to implement a search function similar to that one being used at https://www.datatables.net/.

Below is my code using filter and includes functions from Lodash library. This code does not work because it only looks for exact matches. For example if an object in my data array has fruit: "apple", the filter "app" has no matches.

  data = filter(data, (row) => {
    return includes(row, this.state.filter);
  });

Is there any way I can implement fuzzy search with any of lodash's built in functions? If not can you suggest another way?

Answers


lodash will not have what you need. Depending on your search requirements you could utilize a distance metric based search such as Levenshtein. Or maybe a substring length metric. For a library drop in, look at fuzzy


So, they are searching where characters in first and last name match what you are typing.

In lodash, you can use a filter like this..

.filter(contact => !(this.state.filter && contact.lastName.toLowerCase().indexOf(this.state.filter) == -1 && contact.firstName.toLowerCase().indexOf(this.state.filter) == -1))

This is assuming you are setting the search value to the state and that you are wanting to match the firstname / lastname fields. You should be able to modify this to meet your needs.


Need Your Help

Learning Silverlight as a non .NET developer

silverlight

There are several people about (myself being one of them) who have been developing RIA for a while now using Flex and AJAX. However Silverlight is now on the scene and worth picking up.

how to bind two multibinders with @Named but same interface type?

guice

We have a Multibinder and would like to have two so we need the @Named annotation so we can do