search-fuzzy v1.1.3

Search-Fuzzy

Overview

Search-Fuzzy is a powerful utility for searching specific data in large datasets. It provides a fuzzy search functionality that allows you to search for data by providing a query string and a set of fields to search in. The utility returns an array of objects that match the query, making it ideal for implementing search features in various applications.

Installation

To install Search-Fuzzy, use npm:

npm install search-fuzzy

React Integration

Here's an example of how to integrate Search-Fuzzy into a React application:

import React, { useState, useEffect } from "react";
import { fuzzySearch } from "search-fuzzy/fuzzy/fuzzy";

const TestSearch = () => {
  const [query, setQuery] = useState({ query: "" });
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);
  const fields = [];
  const apiConfig = {
    url: "https://jsonplaceholder.typicode.com/posts",
    useApi: true,
    headers: {
      Authorization: "Bearer your-token",
      Accept: "application/json",
      "Custom-Header": "custom-value",
    },
  };

  useEffect(() => {
    const debounceTimer = setTimeout(() => {
      if (query.query.trim() !== "") {
        setLoading(true);
        const fetchResults = async () => {
          try {
            const response = await fuzzySearch([], fields, query, apiConfig, { maxResults: 10 });
            setResults(response);
            setLoading(false);
          } catch (error) {
            console.error(error);
            setLoading(false);
          }
        };
        fetchResults();
      } else {
        setResults([]);
      }
    }, 500); // 500ms debounce delay

    return () => {
      clearTimeout(debounceTimer);
    };
  }, [query]);

  return (
    <div>
      <h1>Search Results</h1>
      <input
        type="text"
        value={query.query}
        onChange={(e) => setQuery({ query: e.target.value })}
        placeholder="Search..."
      />
      {loading && <p>Loading...</p>}
      {results.length > 0 ? (
        <table border="1" cellPadding="10" style={{ width: "100%", marginTop: "20px" }}>
          <thead>
            <tr>
              <th>ID</th>
              <th>Title</th>
              <th>Body</th>
            </tr>
          </thead>
          <tbody>
            {results.map((result, index) => (
              <tr key={index}>
                <td>{result.id}</td>
                <td>{result.title}</td>
                <td>{result.body}</td>
              </tr>
            ))}
          </tbody>
        </table>
      ) : (
        query.query.trim() !== "" && <p>No results found.</p>
      )}
    </div>
  );
};

export default TestSearch;

JavaScript Integration

Here's how to use Search-Fuzzy in a JavaScript environment:

const { fuzzySearch } = require("search-fuzzy/fuzzy/fuzzy");

const data = [
  { name: "John", age: 20 },
  { name: "Jane", age: 21 },
];

fuzzySearch(data, ["name", "age"], { query: "jane" }).then((res) => {
  console.log(res);
  // Output: [{ name: "Jane", age: 21 }, { name: "John", age: 20 }]
});

Angular Integration

To integrate Search-Fuzzy with an Angular application, follow these steps:

1. Import the necessary modules:

import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { fuzzySearch, Query } from "search-fuzzy/fuzzy/fuzzy";

2. Create a component that uses the Search-Fuzzy utility:

@Component({
  selector: "app-search",
  standalone: true,
  imports: [FormsModule],
  template: `
    <section class="container mt-20 grid justify-center">
      <input [(ngModel)]="searchQuery.query" (input)="onSearch()" />
      <ul>
        @for (result of searchResults; track $index) {
        <li>{{ result.name }}</li>
        }
      </ul>
    </section>
  `,
})
export class SearchComponent {
  searchQuery: Query = { query: "" };
  searchResults: any[] = [];
  data = [
    { name: "John Doe", email: "john@example.com" },
    { name: "Jane Smith", email: "jane@example.com" },
    // ... more data
  ];

  onSearch() {
    fuzzySearch(this.data, ["name", "email"], this.searchQuery).then((res) => {
      this.searchResults = res;
    });
  }
}

API Configuration

For API integration, you can use the following configuration:

const apiConfig = {
  url: "https://jsonplaceholder.typicode.com/posts",
  useApi: true,
  headers: {
    Authorization: "Bearer your-token",
    Accept: "application/json",
    "Custom-Header": "custom-value",
  },
  params: {
    id: 1,
  },
};

fuzzySearch([], fields, query, apiConfig, { maxResults: 3 })
  .then((results) => {
    console.log(results);
  })
  .catch((error) => {
    console.error(error);
  });

Advanced Configuration

The fuzzySearch function accepts additional options for fine-tuning:

const options = {
  threshold: 0.6,
  limit: 10,
};

fuzzySearch([], ["name", "email"], searchQuery, options)
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.

This README provides a comprehensive guide to using the Search-Fuzzy utility in various environments, including React, plain JavaScript, and Angular. It covers installation, basic usage, API configuration, and advanced options.