ヒューズを検索します.js

ヒューズ.JSは、軽量検索をサポートする軽量JavaScript検索ライブラリです.ドキュメントは素晴らしいですし、ライブデモであなたのデータのサンプルを検索して再生することができます.そして、それはオープンソースです.
博士:https://fusejs.io/
ギタブ:https://github.com/krisk/fuse
数週間前、私は、ユーザーが1つの単語入力から単一のランダムな詩を発見したアプリケーションを構築しました.私は既にいくつかの検索機能を内蔵していた外部APIを使用しました.エンドポイントの1つは私がラインで検索することを許可し、私はその後、ランダム化と応答データの形式を働いた.
今週、どのようにヒューズを学ぶの目的のため.JSの作品は、私は単純な反応Webアプリケーションのオブジェクトの配列を使用してウィリアムシェークスピアのすべてのソネットを格納し、インストールヒューズを作った.JSは、与えられたクエリを含むsonnetのためにオブジェクトの私の配列を捜します.
NPMをインストールします.js
我々は、我々の検索コンポーネントをレンダリングする単純なアプリケーションコンポーネントを持っている

import React from 'react';
import Search from './Search';
import './App.css';

function App() {
  return (
    <Search />
  );
}

export default App;

検索コンポーネント

import React, { useState } from 'react';
import Highlight from 'react-highlighter';
import { fuse } from './fuse/fuse-helper';

function Search() {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);

  const handleChange = event => {
    setSearchTerm(event.target.value);
  };

  const handleEnter = async (event) => {
    if (event.keyCode === 13) {
      const foundSonnets = await fuse.search(searchTerm);
      setResults(foundSonnets);
    }
  };

  return (
    <div style={{ margin: 20 }}>
      <h2>fuse.js</h2>
      <input
        type="text"
        placeholder="search"
        value={searchTerm}
        onChange={handleChange}
        onKeyDown={handleEnter}
      />
      {results.map((result, i) => {
        console.log('fuse matches:', result.matches);
        return (
          <div style={{ margin: 20 }} key={i}>
            <Highlight search={searchTerm} style={{ fontWeight: "bold" }}>{result.item.title}</Highlight>
            {result.item.lines.map((line, i) => {
              return (
                <div key={i}>
                  <Highlight search={searchTerm}>{line}</Highlight>
                </div>
              )
            })}
          </div>
        )
      })}
    </div>
  );
}

export default Search;

結果は次のようになります.

私は一時的なソネットデータと私のヒューズヘルパーを保持するために私のSRCディレクトリにヒューズフォルダを設定します.(実際のプロダクションのために作られた大きなアプリケーションを考えれば、私はこのデータを何らかの種類のデータベースにしたいと思いますが、配列記憶は私たちの目的のために動作します).私のファイル構造は以下のようになります.

src/
  fuse/
    fuse-helper.js
    sonnets.js

私たちのsonnetストレージの構造はこのように見えます.これは、キーtitle、author、lines、linecountのオブジェクトとしてソネットの配列に格納されている最初のソネットです.すべてのオブジェクトはこのパターンに従います.

const sonnets = [
  {
    "title": "Sonnet 1: From fairest creatures we desire increase",
    "author": "William Shakespeare",
    "lines": [
      "From fairest creatures we desire increase,",
      "That thereby beauty's rose might never die,",
      "But as the riper should by time decease,",
      "His tender heir might bear his memory:",
      "But thou contracted to thine own bright eyes,",
      "Feed'st thy light's flame with self-substantial fuel,",
      "Making a famine where abundance lies,",
      "Thy self thy foe, to thy sweet self too cruel:",
      "Thou that art now the world's fresh ornament,",
      "And only herald to the gaudy spring,",
      "Within thine own bud buriest thy content,",
      "And tender churl mak'st waste in niggarding:",
      "  Pity the world, or else this glutton be,",
      "  To eat the world's due, by the grave and thee."
    ],
    "linecount": "14"
  },
  {...},
  {...},
  {...},
];

const _sonnets = sonnets;
export { _sonnets as sonnets };

私たちのヒューズヘルパーファイルでは、ヒューズからヒューズをインポートします.JSとsonnetデータ変数.ヒューズを使用する場合は、検索のパラメータ、並べ替えのスタイル、生成された検索結果のマッチについての情報、検索のしきい値を決定するオプションを選択します.私はヒューズのドキュメントでこれらのオプションを調べて、ライブデモでそれらと遊んでお勧めします.ここで注意するのは、keysとthresholdです.通常、あなたは最も近い試合によってソートしたいので、shouldSortも重要です.これをtrueに設定します.Keysはヒューズがアクセスするキーを知ることです.ここでは、SonnetヒューズがSonnetオブジェクトの私たちの配列を通して見て、タイトルキー値で、または、線キー値で目標語を持っているどんなSONETも見つけます.Thresholdは、ファジィ検索を可能にするものです.0.0はあなたが正確な試合を必要とすることを意味します、そして、それが得るように、0.6はファジーのためのセッティングです.

import Fuse  from 'fuse.js';
import { sonnets } from './sonnets';

const options = {
  shouldSort: true,
  includeMatches: true,
  threshold: 0.1,
  location: 0,
  distance: 100,
  maxPatternLength: 32,
  minMatchCharLength: 1,
  keys: [
    "title",
    "lines"
  ]
};

const fuse = new Fuse(sonnets, options);

const _fuse = fuse;
export { _fuse as fuse };

単語starを探すと、この応答が得られます.

*ハイライト効果は反応Highlighter、かなりクールな小さなツールからです.
あなたが再び検索コンポーネントを見た場合、私はコンソールのすべての結果のヒューズマッチをログに記録されます.ログを見てみましょう.

console.log('fuse matches:', result.matches);

ヒューズ結果の配列全体を見たい場合は:

我々は、一致するitemとmatches(includeatches propをtrueに設定した場合)に配列を取得することを確認します.そして、それぞれのオブジェクトが結果配列の項目として表示されることを知って、それに応じてレンダリングします.
フィン