JavaScriptを使用してフォームの入力ボックスの内容の自動補完プロンプト機能を実現するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScriptを使用してフォームの入力ボックスの内容の自動補完プロンプト機能を実現するにはどうすればよいですか?

王林

リリース： 2023-10-24 12:19:46

オリジナル

1484 人が閲覧しました

如何使用 JavaScript 实现表单的输入框内容自动补全提示功能？

JavaScript を使用して、フォームの入力ボックスの内容の自動補完プロンプト機能を実装するにはどうすればよいですか?

インターネットの発展に伴い、フォーム入力ボックスの自動入力プロンプト機能がますます一般的になってきています。ユーザーがコンテンツを入力すると、既存のデータに基づいて可能な入力オプションが提供され、ユーザーが正しい情報を迅速に選択または入力できるようになります。この記事では、JavaScript を使用してフォームの入力ボックスの内容の自動補完プロンプト機能を実装する方法と、具体的なコード例を紹介します。

ステップ 1: HTML 構造の作成

まず、単純な HTML 構造を作成し、それにテキスト入力ボックスを追加する必要があります。例は次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单自动补全提示</title>
</head>
<body>
    <form>
        <input type="text" id="inputBox" autocomplete="off">
    </form>

    <ul id="suggestionList"></ul>
</body>
</html>

ログイン後にコピー

上記のコードでは、ID が「inputBox」のテキスト入力ボックスを作成し、デフォルトのオートコンプリート機能を無効にします (autocomplete="off") ）。さらに、オートコンプリートプロンプトオプションを表示するために、空の順序なしリスト ul も作成しました。

ステップ 2: JavaScript 関数の実装

次に、JavaScript を使用してフォームのオートコンプリートプロンプト関数を実装します。コードでは、入力ボックスのキーボードイベントをリッスンします。ユーザーがコンテンツを入力すると、オートコンプリートプロンプトオプションが生成され、既存のデータに基づいて表示されます。

// JavaScript 代码
var inputBox = document.getElementById('inputBox'); // 获取输入框元素
var suggestionList = document.getElementById('suggestionList'); // 获取提示选项的列表元素

// 模拟已存在的数据
var data = ['apple', 'banana', 'cherry', 'grape', 'orange'];

inputBox.addEventListener('input', function() {
    var inputValue = inputBox.value; // 获取输入框的值
    suggestionList.innerHTML = ''; // 清空提示选项列表

    // 根据输入内容生成提示选项
    var suggestions = data.filter(function(item) {
        return item.includes(inputValue);
    });

    suggestions.forEach(function(item) {
        var li = document.createElement('li');
        li.textContent = item;
        suggestionList.appendChild(li);
    });
});

// 点击提示选项时，将选项的值填入输入框
suggestionList.addEventListener('click', function(e) {
    var selectedValue = e.target.textContent;
    inputBox.value = selectedValue;
});

ログイン後にコピー

上記のコードでは、まず入力ボックス要素とプロンプトオプションのリスト要素を取得します。次に、既存のデータセットをシミュレートしました。次に、入力ボックスの入力イベントをリッスンし、ユーザーがコンテンツを入力したときにハンドラー関数をトリガーします。

処理関数は、まず入力ボックスの値を取得し、次にプロンプトオプションリストをクリアします。その後、入力内容に基づいて、条件を満たすプロンプトオプションが既存のデータから除外されます。フィルタリングプロセス中に、includes メソッドを使用して、既存のデータに入力コンテンツが含まれているかどうかを判断しました。最後に、生成されたプロンプトオプションをプロンプトオプションリストに 1 つずつ追加します。

さらに、プロンプトオプションリストのクリックイベントもリッスンしました。ユーザーがプロンプトオプションをクリックすると、オプションの値が入力ボックスに入力されます。

概要:

JavaScript を使用して、フォームの入力ボックスの内容の自動入力プロンプト機能を実装するのは非常に簡単です。必要なのは、入力ボックスの入力イベントをリッスンし、既存のデータに基づいてプロンプトオプションを生成して表示し、ユーザーがオプションを選択したときに入力ボックスの値を入力することだけです。これにより、ユーザーはより便利に正しい情報を入力できるようになり、ユーザーエクスペリエンスが向上します。この記事での紹介が皆さんのお役に立てれば幸いです。

以上がJavaScriptを使用してフォームの入力ボックスの内容の自動補完プロンプト機能を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。