JavaScript에서 양식의 자동 완성 선택 기능을 구현하는 방법은 무엇입니까?

JavaScript에서 양식의 자동 완성 선택 기능을 구현하는 방법은 무엇입니까?

프런트 엔드 개발에서 양식 자동 완성 선택 기능은 매우 일반적인 요구 사항입니다. 이 기능을 통해 사용자는 미리 정의된 목록에서 해당 옵션을 쉽게 선택하여 수동 입력 없이 채울 수 있습니다. 이번 글에서는 JavaScript를 사용하여 양식의 자동 완성 선택 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

양식의 자동 완성 선택 기능을 구현하려면 텍스트 입력 상자의 input 이벤트를 사용하여 사용자 입력을 수신하고 JavaScript를 사용하여 일치하는 옵션을 필터링하고 표시할 수 있습니다. 사용자의 입력. input事件来监听用户输入，并使用 JavaScript 来根据用户的输入进行筛选和显示匹配的选项。

首先，我们需要在 HTML 中添加一个文本输入框和一个用于显示选项的下拉列表。文本输入框用于用户输入，下拉列表用于显示匹配的选项。示例代码如下：

<input type="text" id="input" />
<select id="select"></select>

接下来，我们使用 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方法对选项数组进行筛选，选出所有包含用户输入值的选项。最后，将筛选出的选项逐个添加到下拉列表中。

在编写完上述代码后，我们可以在浏览器中运行页面来查看效果。当用户在文本输入框中输入内容时，下拉列表将会根据输入的内容进行实时的自动补全选择。

总结：
通过使用 JavaScript，我们可以轻松地实现表单的自动补全选择功能。通过监听文本输入框的input

먼저 HTML로 옵션을 표시하려면 텍스트 입력 상자와 드롭다운 목록을 추가해야 합니다. 사용자 입력에는 텍스트 입력 상자가 사용되고 일치 옵션을 표시하려면 드롭다운 목록이 사용됩니다. 샘플 코드는 다음과 같습니다. 🎜rrreee🎜다음으로 JavaScript를 사용하여 자동 완성 선택 기능을 구현합니다. 먼저 모든 옵션을 포함하는 배열을 정의한 다음 텍스트 입력 상자의 input 이벤트에서 사용자 입력을 처리하고 입력 내용을 기반으로 일치하는 옵션을 필터링하고 표시해야 합니다. 🎜🎜샘플 코드는 다음과 같습니다. 🎜rrreee🎜위 코드를 통해 모든 옵션이 포함된 options 배열을 정의하고, input 이벤트에서 사용자 입력을 수신합니다. 텍스트 입력 상자 . 이벤트 핸들러에서는 먼저 사용자가 입력한 값을 가져와서 소문자로 변환한 후 filter 메서드를 사용하여 옵션 배열을 필터링하고 사용자가 입력한 값이 포함된 모든 옵션을 선택합니다. . 마지막으로 필터링된 옵션을 드롭다운 목록에 하나씩 추가합니다. 🎜🎜위 코드를 작성한 후 브라우저에서 페이지를 실행하여 효과를 확인할 수 있습니다. 사용자가 텍스트 입력 상자에 내용을 입력하면 드롭다운 목록은 입력된 내용을 기반으로 실시간으로 자동 선택을 완료합니다. 🎜🎜요약:
JavaScript를 사용하면 양식의 자동 완성 선택 기능을 쉽게 구현할 수 있습니다. 텍스트 입력 상자의 input 이벤트를 듣고 사용자의 입력에 따라 미리 정의된 옵션을 필터링하고 표시함으로써 사용자가 옵션을 빠르게 선택할 수 있도록 편리한 사용자 인터페이스를 제공할 수 있습니다. 위의 코드 예제는 실제 필요에 따라 조정하고 확장할 수 있는 구현 방법을 제공합니다. 🎜

위 내용은 JavaScript에서 양식의 자동 완성 선택 기능을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!