search-in-js
TypeScript icon, indicating that this package has built-in type declarations

2.1.0 • Public • Published

Array Data Filter Function

This is a custom function designed to filter data in an array based on a search query. It provides flexibility in specifying the keys to search for within the data, as well as the type of search function to use.

Usage

Installation

npm install search-in-js
yarn add search-in-js

Example

import { useState, useEffect } from "react";
import search from "search-in-js";

const ExampleComponent = () => {
  const data = [
    { id: 1, name: "test1", comment: { id: 1, text: "some comment" } },
    { id: 2, name: "test2", comment: { id: 2, text: "some other comment" } },
    // More data...
  ];

  // Define keys for searching
  const keys = ["id", "comment.text"];

  // State for search query and filtered data
  const [value, setValue] = useState("");
  const [filteredData, setFilteredData] = useState(data);

  // Update filtered data when search query changes
  useEffect(() => {
    setFilteredData(search(value, data, keys, "fuzzy"));
  }, [value]);

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <ul>
        {filteredData.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

API

search(value, data, keys, functionType)

  • value (string): The value to search for in the data.

  • data (Array<T>): The array of data to search.

  • keys (Array<string>): The array of keys to search for in the data.

    if you want to search by id and name, you can use the following keys: const keys = ["id", "name"];

    if you want to search by comments.id and comments.text, you can use the following keys: const keys = ["comments.id", "comments.text"];

  • functionType (SEARCH_FUNCTION, optional): The type of search function to use. Defaults to "fuzzy".

    Available search function types: equal, fuzzy, contains, starts-with, ends-with, starts-with-no-space, greater, less, greater-equal, less-equal

Returns: Array<T> - The filtered data based on the search query.

Contributing

Contributions are welcome! Please feel free to open a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.


Feel free to modify and expand upon it to suit your needs!

Package Sidebar

Install

npm i search-in-js

Weekly Downloads

7

Version

2.1.0

License

ISC

Unpacked Size

30.8 kB

Total Files

15

Last publish

Collaborators

  • bimus