# idb-suggester > a simple suggester, using indexedDB. Latest version **0.2.24** (published 2020-09-09) · MIT license · 0 weekly downloads ## Install ```sh npm install idb-suggester pnpm add idb-suggester yarn add idb-suggester bun add idb-suggester ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.2.24 | | Published | 2020-09-09 | | First published | 2020-08-24 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 9 | | Unpacked size | 429.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Author | renaud.genevois | | Maintainers | renaud.genevois | ## Links - npm: https://www.npmjs.com/package/idb-suggester - Repository: https://github.com/renaud23/idb-suggester - Homepage: https://github.com/renaud23/idb-suggester#readme - Issues: https://github.com/renaud23/idb-suggester/issues - npm.io page: https://npm.io/package/idb-suggester ## Dependencies (9) - [snowball](https://npm.io/package/snowball.md) ^0.3.1 - [classnames](https://npm.io/package/classnames.md) ^2.2.6 - [string-hash](https://npm.io/package/string-hash.md) ^1.1.3 - [remove-accents](https://npm.io/package/remove-accents.md) ^0.4.2 - [string-tokenizer](https://npm.io/package/string-tokenizer.md) ^0.0.8 - [string-similarity](https://npm.io/package/string-similarity.md) ^4.0.2 - [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^9.3.2 - [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^4.2.4 - [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^7.1.2 ## Recent versions - 0.2.24 (latest) — 2020-09-09 - 0.2.23 — 2020-09-04 - 0.2.22 — 2020-09-04 - 0.2.21 — 2020-09-03 - 0.2.20 — 2020-09-02 - 0.2.19 — 2020-09-02 - 0.2.18 — 2020-09-02 - 0.2.17 — 2020-09-02 - 0.2.16 — 2020-09-02 - 0.2.15 — 2020-09-02 - 0.2.14 — 2020-09-02 - 0.2.13 — 2020-09-02 - 0.2.12 — 2020-09-02 - 0.2.11 — 2020-09-02 - 0.2.10 — 2020-09-02 - … 18 more at https://npm.io/package/idb-suggester/versions ## README # Synopsis Une barre de recherche proposant des entités stockées dans IndexedDB. Un second composant permet de charger l'index à partir d'une liste d'entités. `npm install idb-suggester` ou `yarn add idb-suggester` `npm run storybook` ou `yarn storybook` ## DEMO [DEMO](https://renaud23.github.io/test-idb-suggester/) ## Créer un index dans IDB. L'index contient une liste d'entités et un index permettant des recherches par préfix sur celle-ci. A la création, la liste des attributs dont la valeur doit être utilisée pour créer l'index doit-être fournit : ```javascript: const fields = [{ name: '', tokenize: true, language: 'French' }]; ``` Si l'attribut tokenize est renseigner à true, la valeur du champs est tokenizer, sa racine est extraite avec l'algorithme snowball et le langage préciser, pour permettre une recherche par mot clef plutôt que par préfixe. ```javascript: import { createWorker, BULK_INSERT_MESSAGES } from 'idb-suggester'; function workerCallback(args) { const { message, step } = args; switch (message) { case BULK_INSERT_MESSAGES.complete: { console.log('Step finished ', step); break; } case BULK_INSERT_MESSAGES.finished: console.log('Chargement fini'); break; case BULK_INSERT_MESSAGES.error: break; default: } } const idbName = ''; // Nom de la base IDB. const fields = [{ name: '' }, ...]; // description des attributs à indéxer. const data = [...]; // un tableau contenant la liste d'entité const bulkTask = createWorker(workerCallback); // créer un web worker pour le chargement. bulkTask(idbName, fields, data, false/true);// lance la procédure de chargement. ``` Un composant `` prêt à l'emploi est fournit pour intégrer la tâche d'alimentation de l'index. ## Utiliser un Index ```javascript: import { Suggester } from '../suggester'; import React, { useState, useEffect } from 'react'; import { createStore, SEARCH_TYPES } from '../store-index'; import 'idb-suggester/themes/css/default-theme.css'; // intégration dans un composant react. const IDB_INDEX_NAME = 'name'; const IDB_VERSION = 1; const IDB_ENTITIES_FIELDS = [...]; function App() { const [store, setStore] = useState(undefined); useEffect(function () { async function init() { setStore(await createStore(IDB_INDEX_NAME, IDB_VERSION, IDB_ENTITIES_FIELDS)); } }); return (
); } ``` ## Suggester Props | Property | Type | Default | Description | | :---------------- | :-------------- | :------------------------------------- | :--------------------------------------------------------------------------------- | | `optionComponent` | store object | required | un index valide chargé avec la fonction createStore | | `optionComponent` | React component | React component | composant de rendu des suggestions dans le panel | | `searchIcon` | React component | undefined | icône de recherche | | `how` | number | 15 | nombre maximum de suggestions proposées | | `placeHolder` | string | React component | placeHolder du champ input | | `language` | string | React component | langage utilisé pour la lemmatisation pour les index de type SEARCH_TYPES.tokenize | | `className` | string | React component | classe css additionnelle pour surcharger les styles | | `onChange` | function | `(query,suggestions)=>null` | function invoquée en cas de modification de la recherche | | `onSelect` | function | `(selection, suggestions,query)=>null` | function invoquée en cas de sélection d'un item du panel | --- _Source: https://npm.io/package/idb-suggester · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._