autocomplete-search-react v0.2.0

npm-autocomplete-search-react

Overview

useSearch is a custom React hook that provides autocomplete search functionality for an array of objects using the String2ObjectAutoCompleteSearch class from the @neosh11/autocomplete-search package. The hook filters the data based on a given search key and manages search text and filtered results internally.

Example -> Link

Why use this and not a simple filter?

We tested out a simple filter on 100,000 tokens on the browser and these were the results:

If you want your results to instantly load as you're typing with a lot of data, this library will be a life saver!

Usage

install

# if using yarn
yarn add autocomplete-search-react

# if using npm
npm install autocomplete-search-react

Importing the module

import { useSearch } from 'autocomplete-search-react';

Usage

const data = [
  // your array of objects
];

const searchId = 'id'; // the property that will act as an ID
const searchKey = 'name'; // The property to search for in the objects
// or we can also use a function to map things
const searchFunction = (d) => d.title + d.description; // The property to search for in the objects
const maxResults = 10; // Maximum number of results to display
const tokeniser = ' '; // what to use to split the strings -> default is ' ', can be a RegExp
const [onTextChange, filteredObjects, searchText] = useSearch({
  data: data
  searchId: searchId;
  searchKey: searchKey; // or function searchFunction
  maxResults: maxResults;
  tokenizer: tokeniser // or it can be regex - optional -> default is ' '
});

Example

function App() {
  const [onTextChange, filteredObjects, searchText] = useSearch({
  data: data
  searchId: 'id';
  searchKey: 'name'; // or function searchFunction
  maxResults: 10;
  tokenizer: ', ' // or it can be regex - optional -> default is ' '
});

  return (
    <div>
      <input
        type="text"
        value={searchText}
        onChange={(e) => onTextChange(e.target.value)}
        placeholder="Search"
      />
      <ul>
        {filteredObjects.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

This example demonstrates a simple search feature for a list of objects with name property. The search is case-insensitive and will display up to 10 results.