JavaScriptにてテキストボックスにサジェスト機能を実装できる「autoComplete.js」の利用方法

以前にjQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する方法をメモしたが、今回はバニラJavaScriptにて実装したい。調べたところ「autoComplete.js」ライブラリを用いることで簡単に実装できそう。以下にサンプルと実装方法をメモ。

autoComplete.js

公式サイト

https://tarekraafat.github.io/autoComplete.js/

GitHub

https://github.com/TarekRaafat/autoComplete.js

CDN

CDNで使う場合は以下を記述する。

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

尚、別のスタイル(デザイン)に変更したい場合、autoComplete.min.cssは読み込ませずに以下のどちらかを読み込ませること。

<!-- style 1 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/css/autoComplete.01.min.css">

<!-- style 2 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/css/autoComplete.02.min.css">

サンプル

https://taitan916.info/sample/autoComplete.js/

style 2のCSSを指定したサンプルになる。

実装方法

ソースコード

<input id="autoComplete">

<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/css/autoComplete.02.min.css">
<script>
const option = {
    placeHolder: '好きな寿司ネタを入力してください。',
    data: {
        src: [
            `サーモン`,
            `マグロ`,
            `中トロ`,
            `ねぎとろ`,
            `いくら`,
            `大トロ`,
            `炙りサーモン`,
            `エビ`,
            `ハマチ`,
            `鯛`,
        ]
    },
    resultItem: {
        highlight: true,
    },
    events: {
        input: {
            selection: (event) => {
                const selection = event.detail.selection.value;
                autoCompleteJS.input.value = selection;
            }
        }
    }
}
const autoCompleteJS = new autoComplete(option);
</script>