JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでオートコンプリート／サジェスト機能を実装する方法

入力フォームに文字を打つと候補が自動的に表示される「オートコンプリート（サジェスト）機能」は、ユーザビリティを大きく向上させる定番のUIパターンです。JavaScriptでは、HTMLの<datalist>要素とkeyupイベントを組み合わせることで、シンプルかつ効率的にこの機能を実装できます。

実装のポイント

この実装では以下の仕組みを利用します。

  • <datalist>要素：入力欄に候補リストを紐づけるためのHTML標準要素
  • keyupイベント：ユーザーがキーを入力するたびに検索処理を実行
  • 部分一致検索：indexOf()を使い、大文字小文字を区別せずに入力値とタグ名を照合

コード例

以下は、果物の名前を候補として表示するオートコンプリート機能の完全なサンプルコードです。

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
</style>
</head>
<body>
<h1>JavaScript Auto Complete / Suggestion feature</h1>
<input type="text" list="datalist" class="fruits" />
<datalist id="datalist">
<option value="orange"></option>
<option value="apple"></option>
<option value="pineapple"></option>
<option value="guava"></option>
<option value="mango"></option>
<option value="peach"></option>
<option value="pomegranate"></option>
<option value="litchi"></option>
</datalist>
<script type="text/javascript">
    var tags = ["orange", "apple","pineapple","guava","mango","pomegranate","litchi"];
    let check;
    document.querySelector(".fruits").addEventListener("keyup", (event) => {
        let value = event.target.value;
        document.getElementById("datalist").innerHTML = "";
        tags.forEach((item) => {
            if (item.toLowerCase().indexOf(value.toLowerCase()) > -1) {
                var opt = document.createElement("option");
                var sel = document.createTextNode(item);
                opt.appendChild(sel);
                document.getElementById("datalist").appendChild(opt);
            }
        });
    });
</script>
</body>
</html>

コードの解説

処理の流れを順番に見ていきましょう。

1. 候補データの準備

配列tagsに、オートコンプリートの候補となる単語（果物の名前）を格納します。実際のアプリケーションでは、サーバーからAPI経由で取得したデータを使うことも可能です。

2. keyupイベントの監視

addEventListener("keyup", ...)により、入力フィールドでキーが離されるたびに処理が実行されます。event.target.valueで現在の入力値を取得します。

3. 候補リストの再構築

まずinnerHTML = ""で既存の候補をクリアし、その後forEach()で全タグを走査します。toLowerCase()で両者を小文字に揃えてからindexOf()で照合することで、大文字・小文字を問わない部分一致検索を実現しています。

4. 一致する候補の追加

一致した項目はdocument.createElement("option")で新しい

実行結果

ページを読み込むと、入力フィールドが表示されます。

何も入力していない状態では、<datalist>に定義されたすべての候補がドロップダウンに表示されます。

入力フィールドに文字を入力すると−

入力値に部分一致する候補だけがリアルタイムに絞り込まれて表示されます。例えば「a」と入力すれば「apple」「mango」「guava」など、aを含む項目のみが候補として現れます。

まとめ

このように、<datalist>と数行のJavaScriptを組み合わせるだけで、外部ライブラリに依存しない軽量なオートコンプリート機能を作成できます。候補データを動的に差し替えれば、検索ボックスやタグ入力など、さまざまな場面に応用できる汎用性の高い実装です。

  1. Pixel 4についに「目開き検知」フェイスアンロック機能が追加

    Googleは本日配信したアップデートにて、長らく待望されていた「目開き(Eyes Open)」セキュリティ機能をついに導入しました。当初は1か月前に提供開始予定でしたが実現せず、同社は批判を受けることになりました。しかし現在は正式に利用可能となっており、Android 11 DP2(開発者プレビュー2)を導入しているPixel 4ユーザーなら誰でもこの機能を活用できます。 新機能「Eyes Open」とは何か? 「Eyes Open」は、Pixel 4ユーザーが一貫して求め続けてきた機能です。発表から約6か月を経て、Googleはようやくその実装を果たしました。従来は、ユーザーの目が閉じてい

  2. 【TweakShot】自動録画停止機能を使って録画を自動で終了する方法

    画面録画は、YouTube動画の制作から、重要な会議やゲームプレイの記録、SNSでの共有まで、プライベートでもビジネスでも多くの人に活用されています。そんな中、「自動録画停止（Auto Stop Recording）」機能は非常に便利な存在です。これまで当サイトでは、NetflixやPrime Videoなどのストリーミングサービスの録画も含めて、TweakShot Screen Recorderをご紹介してきました。そこで本記事では、パソコンの画面録画や音声録画を自動的に停止する方法を、時刻指定・録画時間指定・ファイルサイズ指定の3つのパターンに分けて、手順を詳しく解説します。 TweakS