オートコンプリートの実装方法:初心者向けガイド

HTMLとCSSの準備:
- 入力フィールドを作成します。これは、ユーザーがテキストを入力する場所です。
- オートコンプリートの結果を表示するためのドロップダウンメニューを作成します。このメニューは、CSSを使用してスタイリングすることもできます。
JavaScriptを使用したオートコンプリートの実装:
- 入力フィールドに対して、keyupイベントリスナーを追加します。これにより、ユーザーがキーを離したときにオートコンプリートの機能が動作します。
- キーワードリストを作成します。これは、オートコンプリートの候補となるキーワードのリストです。
- キーワードリストと入力フィールドの値を比較し、一致する結果を抽出します。
- 抽出された結果をドロップダウンメニューに表示します。
- ユーザーが結果を選択した場合、その値を入力フィールドに自動的に入力します。

コード例: 下記は、簡単なオートコンプリートの実装例です。

HTML:

<input type="text" id="inputField" />
<div id="autocompleteResults"></div>

JavaScript:

const inputField = document.getElementById("inputField");
const autocompleteResults = document.getElementById("autocompleteResults");
const keywords = ["apple", "banana", "cherry", "date", "elderberry"];
inputField.addEventListener("keyup", function() {
 const inputText = inputField.value;
 const matchedResults = keywords.filter(keyword =>
   keyword.startsWith(inputText)
 );
 autocompleteResults.innerHTML = "";
 matchedResults.forEach(function(result) {
   const resultElement = document.createElement("div");
   resultElement.innerText = result;
   resultElement.addEventListener("click", function() {
     inputField.value = result;
     autocompleteResults.innerHTML = "";
   });
   autocompleteResults.appendChild(resultElement);
 });
});

このコード例は、入力フィールドにキーワードを入力すると、入力にマッチするオートコンプリートの結果を表示します。ユーザーが結果を選択すると、その値が入力フィールドに自動的に入力されます。