ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptを使用してフォームの入力ボックスの内容の自動補完プロンプト機能を実現するにはどうすればよいですか?
JavaScriptを使用してフォームの入力ボックスの内容の自動補完プロンプト機能を実現するにはどうすればよいですか?
- 王林オリジナル
- 2023-10-24 12:19:461604ブラウズ
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 サイトの他の関連記事を参照してください。