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で簡単にURL操作が行える「domurl」ライブラリの利用方法
JavaScriptでGETパラメータやURLを操作する際にsplitで配列に分 ...
-
Dexie.jsを利用してIndexedDBを取り扱う方法
IndexedDBを用いて色々するという案件を見かけたが、そもそもIndexed ...
-
ローソク足のグラフをJavaScriptで描写する方法(highstock)
株価か仮想通貨などの値動き(チャート)を図表とするローソク足のグラフを何らかの方 ...
-
円形のプログレスバーをprogressbar.jsで実装する方法
円形のプログレスバーを実装したかった。CSSだったり画像を用いたりする方法もあっ ...
-
JavaScriptにて電子書籍や漫画ビューア用のライブラリ「ToraViewer」の利用方法
電子書籍や漫画ビューア用を設置したい。条件としてはレスポンシブ対応していること。 ...