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>
関連記事
-
-
JavaScriptのマップ用ライブラリ「MapLibre GL JS」の利用方法
あるサイトをWappalyzerで調査していた際に「MapLibre GL JS ...
-
-
JavaScriptでCookieを取り扱う「js-cookie」ライブラリの利用方法
「jquery-cookie」プラグイン開発終了に伴い「js-cookie」ライ ...
-
-
JavaScriptのライブラリ「crypto-js」を使用して暗号化・復号化・ハッシュ化する方法
JavaScriptにてCookie等にデータを保存する際に暗号化したものを保存 ...
-
-
Dexie.jsを利用してIndexedDBを取り扱う方法
IndexedDBを用いて色々するという案件を見かけたが、そもそもIndexed ...
-
-
jQueryのトースト(通知)用ライブラリ「iziToast.js」の利用方法
システム構築の際、エラー表示をJavaScriptのアラートではなくトースト(通 ...