JavaScriptのオートコンプリートライブラリautoComplete.jsを使ってみる #JavaScript

autoComplete.jsとは

レファレンスによると、以下の特徴があります。

Vanilla.js
他のライブラリを必要としない
シンプルで簡単
軽い
速い
汎用性が高い
カスタマイズ性が高い

公式レファレンス

https://tarekraafat.github.io/autoComplete.js/#/?id=api-configuration

ハンズオン

1. 環境構築

autoComplete.jsでは直接DOMを触るのでReactを使う恩恵はありませんが、環境構築が楽なのでcreate-react-appで動かしてみましょう。Yarnの環境が整っていない方は、Yarnのインストールもしておいてください。

$ yarn create react-app autocomplete-react
$ yarn add @tarekraafat/autocomplete.js

2. CSSの読み込み

public/index.htmlのheadに以下を追加します。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@7.2.0/dist/css/autoComplete.min.css">

3. App.jsの書き換え

src/App.jsを以下のように書き換えます。

import React, { useEffect } from 'react';
import autoComplete from '@tarekraafat/autocomplete.js'

const App = () => {
  useEffect(() => createAutoComplete())
  return (
    <>
      <input id="autoComplete" type="text" tabIndex={1}></input>
      <p className="selection"></p>
    </>
  )
}

const createAutoComplete = () => {
  const autoCompletejs = new autoComplete({
    // データ
    data: {
      src: fetch('https://tarekraafat.github.io/autoComplete.js/demo/db/generic.json').then(h=>h.json()),
      // src内で
      key: ["food", "cities", "animals"],
      cache: true
    },
    // 結果のソート
    sort: (a, b) => {
      if (a.match < b.match) return -1;
      if (a.match > b.match) return 1;
      return 0;
    },
    // inputの初期値
    placeHolder: "Food & Drinks",
    // inputのセレクタ
    selector: "#autoComplete",
    // 実行される最低文字数
    threshold: 0,
    // 遅延
    debounce: 0,
    // 検索モード
    searchEngine: "strict",
    // ハイライト
    highlight: true,
    // 最大表示数
    maxResults: 5,
    // 結果表示の詳細
    resultsList: {
      render: true,
      container: source => {
        source.setAttribute("id", "autoComplete_list");
      },
      destination: document.querySelector("#autoComplete"),
      position: "afterend",
      element: "ul"
    },
    // 結果表示の加工
    resultItem: {
      content: (data, source) => {
        source.innerHTML = data.match;
      },
      element: "li"
    },
    // マッチする結果が存在しなかった場合
    noResults: () => {
      const result = document.createElement("li");
      result.setAttribute("class", "no_result");
      result.setAttribute("tabindex", "1");
      result.innerHTML = "No Results";
      document.querySelector("#autoComplete_list").appendChild(result);
    },
    // 結果が選択された場合
    onSelection: feedback => {
      const selection = feedback.selection.value.food;
      document.querySelector(".selection").innerHTML = selection;
      document.querySelector("#autoComplete").value = "";
      document
        .querySelector("#autoComplete")
        .setAttribute("placeholder", selection);
    }
  })
}

export default App;

4. 実行

$ yarn start

CSSを一切触っていないのでレイアウトはバラバラですが、ちゃんと動作しました！

オプション一覧

使用できるオプションの概要を書いておきます。
あまり多くないので、実際触ってみるのがわかりやすいと思います。

キー	説明	値	デフォルト
`data`	データのsrc、データのkey、データのキャッシュ	1- src: 文字列の配列か、文字列の配列を返す関数（必須） 2- key: 文字列の配列。srcがオブジェクトの場合、検索対象のkeyを指定するために必須。 3- Cache: srcが静的な場合はtrue、srcがクエリを使用した動的なものの場合はfalseを指定。	Data `src`
`trigger`	オートコンプリートする条件	1- event: 文字列の配列 2- condition: - 関数 (query) => Condition `String`	1- event: `["input"]` 2- condition: `(query.length > this.threshold && query !== " ")`
`query`	入力された文字列の加工	オブジェクトを返す関数 1- manipulate: queryを引数に取る関数	なし
`sort`	Sort rendered results	関数例 (a, b) => { if (a.match < b.match) return -1; if (a.match > b.match) return 1; return 0; }	ランダムな表示
`placeHolder`	フォームの初期値	文字列	Blank / Empty
`selector`	対象とするinput要素のセレクタ	- idの文字列か、クラス OR - 関数 ( ) => `document.querySelector("")`	`"#autoComplete"`
`threshold`	Minimum characters length before engine starts rendering results	数値	`0`
`debounce`	文字を入力してからオートコンプリートが開始されるまでの遅延時間	ミリ秒の数値	`0`
`searchEngine`	Search Engine Type/Mode	"strict"か"loose"、もしくは(query, record)を引数に取りそれぞれマッチしたものを返すカスタム関数	`"strict"`
`resultsList`	オートコンプリート結果のリストの表示先、位置、要素 position, element & navigation	５つのメソッドからなるオブジェクト 1- render: 論理型 2- container: sourceを引数に取る関数 3- destination: `document.querySelector("#div")` 4- position: `"beforebegin"`, `"afterbegin"`, `"beforeend"`, `"afterend"`もしくは、関数 ( ) => `{destination: "...", position: "..."}` 5- element: "ul", "span", "div",もしくはそれ以外 6- navigation: `(event, input, resListElement, onSelection, resListData)` を引数に取る関数	1- render: `false` 2- container: `(source) => { ... }` 3- destination: `document.querySelector("#autoComplete")` 4- position: `"afterend"` 5- element: `"ul"` 6- navigation: `default`
`resultItem`	表示される結果の内容と要素	- 2つのメソッドからなるオブジェクト 1- content: (data, source) を引数に取る関数。`data.match`は、結果をハイライトするのに使用します。 2- element: "li", "span", "div"もしくはそれ以外	1- content: `(data, source) => { ... }` 2- element: `"li"`
`noResults`	オートコンプリート結果が見つからなかった場合に実行される関数の定義	関数
`highlight`	結果をハイライトするかどうか	論理型	`false`
`maxResults`	表示される結果の最大数	数値	`5`
`onSelection`	選択されたときに実行される関数の定義	関数