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

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 :

const fields = [{ name: '<field_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.

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 = '<MY_STORE_NAME>'; // Nom de la base IDB.
const fields = [{ name: '<field_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 <StoreManager /> prêt à l'emploi est fournit pour intégrer la tâche d'alimentation de l'index.

Utiliser un Index

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 (
    <div style={{ width: '380px' }}>
      <Suggester
        store={store}
        className="custom-css-className"
        displayPath="path"
        placeHolder="Searching something..."
        optionComponent={CustomOptionComponent}
        onSelect={function (item, all, query) {
          console.log('onSelect select option', item, all, query);
        }}
        searchType={SEARCH_TYPES.prefix}
      />
    </div>
  );
}

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