フォームの自動補完選択機能をJavaScriptで実装するにはどうすればよいですか?

JavaScript フォームの自動補完選択機能を実装するにはどうすればよいですか?

フロントエンド開発では、フォームのオートコンプリート選択機能は非常に一般的な要件です。この機能により、ユーザーは事前定義されたリストから対応するオプションを簡単に選択し、手入力することなく入力できます。この記事では、JavaScript を使用してフォームのオートコンプリート選択機能を実装する方法と、具体的なコード例を紹介します。

フォームの自動補完選択機能を実装するには、テキスト入力ボックスの input イベントを使用してユーザー入力を監視し、JavaScript を使用して一致する項目をフィルタリングして表示します。ユーザーの入力オプション。

まず、HTML にオプションを表示するためのテキスト入力ボックスとドロップダウン リストを追加する必要があります。テキスト入力ボックスはユーザー入力に使用され、ドロップダウン リストは一致するオプションを表示するために使用されます。サンプルコードは以下のとおりです。

次に、JavaScriptを使用して自動補完選択機能を実装します。まず、すべてのオプションを含む配列を定義し、次にテキスト入力ボックスの input イベントでユーザー入力を処理し、入力内容に基づいて一致するオプションをフィルターして表示する必要があります。

サンプル コードは次のとおりです。

const options = ["Apple", "Banana", "Cherry", "Durian", "Grape", "Lemon", "Mango", "Orange", "Peach", "Pear"];

const input = document.getElementById("input");
const select = document.getElementById("select");

input.addEventListener("input", function() {
  const inputValue = input.value.toLowerCase(); // 获取用户输入的值并转换为小写字母

  // 清空下拉列表中的选项
  select.innerHTML = "";

  // 根据用户输入的值来筛选匹配的选项
  const filteredOptions = options.filter(function(option) {
    return option.toLowerCase().includes(inputValue);
  });

  // 将筛选出的选项添加到下拉列表中
  filteredOptions.forEach(function(option) {
    const optionElement = document.createElement("option");
    optionElement.value = option;
    select.appendChild(optionElement);
  });
});

上記のコードを通じて、テキスト内のすべてのオプション options および input## を含む配列を定義します。入力ボックス #イベントでのユーザー入力をリッスンします。イベント ハンドラーでは、まずユーザーが入力した値を取得して小文字に変換し、次に filter メソッドを使用してオプション配列をフィルターし、ユーザーが入力した値を含むすべてのオプションを選択します。最後に、フィルタリングされたオプションをドロップダウン リストに 1 つずつ追加します。

JavaScript を使用すると、フォームのオートコンプリート選択機能を簡単に実装できます。テキスト入力ボックスの
input イベントをリッスンし、ユーザーの入力に基づいて事前定義されたオプションをフィルター処理して表示することにより、ユーザーがオプションを迅速に選択できる便利なユーザー インターフェイスを提供できます。上記のコード例は、実際のニーズに応じて調整および拡張できる実装メソッドを示しています。

以上がフォームの自動補完選択機能をJavaScriptで実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。