autocomplete-search-react
v0.2.0
Published
This package enables you to perform prefix searches with exceptional speed in react native and react.
Downloads
3
Maintainers
Readme
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
| Function | Time |
| ---------------------------------------------- | ------------------------------------------------------------------------- |
| insert(word: string, id: string)
| O(m)
, where m is the length of the word being inserted. |
| findWords(prefix: string, maxCount?: number)
| O(k + n)
, where n is the number of nodes, k is the lenght of the prefix |
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:
| Method | Time (ms) | | ------------------ | --------- | | Simple filter | 467 | | autoCompleteSearch | 4 |
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.