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

JavaScriptでオートコンプリート（入力補完）機能を実装する方法

JavaScriptによるオートコンプリートの実装

検索フォームなどでユーザーの入力に合わせて候補を自動的に表示する「オートコンプリート（入力補完）」機能は、JavaScriptを使えばライブラリなしでも実装できます。本記事では、配列に格納されたデータを候補として表示し、マウスクリックやキーボード操作で選択できるオートコンプリートの作り方を、完全なサンプルコードとともに解説します。

実装のポイント

このサンプルでは以下のような仕組みでオートコンプリートを実現しています。

  • inputイベント：テキストフィールドに入力があるたびに発火し、入力値と前方一致する項目を候補リストとして動的に生成します。
  • キーボード操作：下矢印キー・上矢印キーで候補を移動でき、Enterキーで選択を確定できます。
  • クリック操作：候補をクリックすると、その値がテキストフィールドに入力されます。
  • 候補リストの閉じる処理：フォーム外をクリックすると、表示中の候補リストが自動的に非表示になります。

サンプルコード

フォームにオートコンプリートを実装するコードは以下の通りです。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
    * {
        box-sizing: border-box;
    }
    body {
        margin: 10px;
        padding: 0px;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .autocomplete {
        position: relative;
        display: inline-block;
    }
    input {
        border: none;
        background-color: #f1f1f1;
        padding: 10px;
        font-size: 16px;
        border-radius: 4px;
    }
    input[type="text"] {
        background-color: #e1f6fc;
        width: 100%;
    }
    input[type="submit"] {
        background-color: DodgerBlue;
        color: #fff;
        cursor: pointer;
    }
    .autocomplete-items {
        position: absolute;
        border-bottom: none;
        border-top: none;
        z-index: 99;
        top: 100%;
        left: 0;
        right: 0;
    }
    .autocomplete-items div {
        padding: 10px;
        cursor: pointer;
        border: 1px solid #8e26d4;
        border-bottom: 1px solid #d4d4d4;
    }
    .autocomplete-items div:hover {
        background-color: #e9e9e9;
    }
    .autocomplete-active {
        background-color: rgb(30, 255, 169) !important;
        color: #ffffff;
    }
</style>
</head>
<body>
<h1>Autocomplete Example</h1>
<form autocomplete="off">
<div class="autocomplete" style="width:300px;">
<input id="searchField" type="text" name="animal" placeholder="Animals" />
</div>
<input type="submit" />
</form>
<script>
    function autocomplete(searchEle, arr) {
        var currentFocus;
        searchEle.addEventListener("input", function(e) {
            var divCreate,
            b,
            i,
            fieldVal = this.value;
            closeAllLists();
            if (!fieldVal) {
                return false;
            }
            currentFocus = -1;
            divCreate = document.createElement("DIV");
            divCreate.setAttribute("id", this.id + "autocomplete-list");
            divCreate.setAttribute("class", "autocomplete-items");
            this.parentNode.appendChild(divCreate);
            for (i = 0; i <arr.length; i++) {
                if ( arr[i].substr(0, fieldVal.length).toUpperCase() == fieldVal.toUpperCase() ) {
                    b = document.createElement("DIV");
                    b.innerHTML = "<strong>" + arr[i].substr(0, fieldVal.length) + "</strong>";
                    b.innerHTML += arr[i].substr(fieldVal.length);
                    b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
                    b.addEventListener("click", function(e) {
                        searchEle.value = this.getElementsByTagName("input")[0].value;
                        closeAllLists();
                    });
                    divCreate.appendChild(b);
                }
            }
        });
        searchEle.addEventListener("keydown", function(e) {
            var autocompleteList = document.getElementById(
                this.id + "autocomplete-list"
            );
            if (autocompleteList)
                autocompleteList = autocompleteList.getElementsByTagName("div");
            if (e.keyCode == 40) {
                // 下矢印キー
                currentFocus++;
                addActive(autocompleteList);
            }
            else if (e.keyCode == 38) {
                // 上矢印キー
                currentFocus--;
                addActive(autocompleteList);
            }
            else if (e.keyCode == 13) {
                // Enterキー
                e.preventDefault();
                if (currentFocus > -1) {
                    if (autocompleteList) autocompleteList[currentFocus].click();
                }
            }
        });
        function addActive(autocompleteList) {
            if (!autocompleteList) return false;
            removeActive(autocompleteList);
            if (currentFocus >= autocompleteList.length) currentFocus = 0;
            if (currentFocus < 0) currentFocus = autocompleteList.length - 1;
            autocompleteList[currentFocus].classList.add("autocomplete-active");
        }
        function removeActive(autocompleteList) {
            for (var i = 0; i < autocompleteList.length; i++) {
                autocompleteList[i].classList.remove("autocomplete-active");
            }
        }
        function closeAllLists(elmnt) {
            var autocompleteList = document.getElementsByClassName(
                "autocomplete-items"
            );
            for (var i = 0; i < autocompleteList.length; i++) {
                if (elmnt != autocompleteList[i] && elmnt != searchEle) {
                    autocompleteList[i].parentNode.removeChild(autocompleteList[i]);
                }
            }
        }
        document.addEventListener("click", function(e) {
            closeAllLists(e.target);
        });
    }
    var animals = ["giraffe","tiger", "lion", "dog","cow","bull","cat","cheetah"];
    autocomplete(document.getElementById("searchField"), animals);
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptでオートコンプリート（入力補完）機能を実装する方法

「Animals」フィールドに何か文字を入力すると、入力した文字列で始まる動物名が候補として表示されます。

JavaScriptでオートコンプリート（入力補完）機能を実装する方法

まとめ

このように、addEventListenerでinputイベントとkeydownイベントを組み合わせることで、シンプルなオートコンプリート機能を自作できます。候補データの配列を差し替えれば、都道府県名や商品名など、さまざまな用途に応用できるでしょう。

  1. HTMLとJavaScriptで作る重量コンバーター：kgをgに変換する方法

    HTMLとJavaScriptを組み合わせれば、ブラウザ上で動作するシンプルな重量コンバーター（単位変換ツール）を簡単に作成できます。この記事では、キログラム（kg）を入力するとグラム（g）に自動変換して表示するウェイトコンバーターの実装方法を、サンプルコードとともにわかりやすく解説します。 実装コード例 以下のコードをそのままHTMLファイルとして保存し、ブラウザで開くだけで動作します。 <!DOCTYPE html> <html> <head> <style>     body{   

  2. JavaScriptで定数を作成する方法とは？constキーワードの使い方を実例付きで解説

    JavaScriptで定数を作成するには、constキーワードを使用します。constで宣言された変数は、一度値を代入すると後から再代入することができません。もし再代入を試みると、TypeErrorエラーが発生します。定数作成のコード例以下は、JavaScriptでconstを使って定数を作成し、その値を変更しようとしたときの挙動を確認できるサンプルコードです。サンプルコード<!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma,