JavaScript를 사용하여 양식 입력 상자 내용의 자동 완성 프롬프트 기능을 구현하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

JavaScript를 사용하여 양식 입력 상자 내용의 자동 완성 프롬프트 기능을 구현하는 방법은 무엇입니까?

王林

풀어 주다： 2023-10-24 12:19:46

원래의

1564명이 탐색했습니다.

如何使用 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도 만들었습니다. autocomplete="off"）。另外，我们还创建了一个空的无序列表 ul，用于显示自动补全的提示选项。

第二步：实现 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;
});

로그인 후 복사

在上述代码中，我们首先获取输入框元素和提示选项的列表元素。然后，我们模拟了一组已存在的数据（data）。接着，我们监听输入框的 input 事件，在用户输入内容时触发处理函数。

处理函数首先获取输入框的值，然后清空提示选项列表。之后，根据输入内容从已存在的数据中筛选出符合条件的提示选项。筛选过程中，我们使用了 includes

2단계: JavaScript 기능 구현

다음으로 JavaScript를 사용하여 양식의 자동 완성 프롬프트 기능을 구현합니다. 코드에서는 사용자가 콘텐츠를 입력하면 기존 데이터를 기반으로 자동 완성 프롬프트 옵션이 생성되고 표시되는 입력 상자의 키보드 이벤트를 듣습니다.

rrreee

위 코드에서는 먼저 입력 상자 요소와 프롬프트 옵션의 목록 요소를 가져옵니다. 그런 다음 기존 데이터 세트를 시뮬레이션했습니다. 다음으로, 입력 상자의 입력 이벤트를 수신하고 사용자가 콘텐츠를 입력할 때 핸들러 기능을 트리거합니다.

처리 함수는 먼저 입력 상자의 값을 가져온 다음 프롬프트 옵션 목록을 지웁니다. 이후 입력 내용을 기준으로 조건에 맞는 프롬프트 옵션이 기존 데이터에서 필터링됩니다. 필터링 과정에서 includes 메서드를 사용하여 기존 데이터에 입력 콘텐츠가 포함되어 있는지 확인했습니다. 마지막으로 생성된 프롬프트 옵션을 프롬프트 옵션 목록에 하나씩 추가합니다. 🎜🎜또한 프롬프트 옵션 목록의 클릭 이벤트도 사용자가 프롬프트 옵션을 클릭하면 입력 상자에 해당 옵션의 값이 채워지는 것을 들었습니다. 🎜🎜요약: 🎜🎜JavaScript를 사용하여 양식의 입력 상자 내용에 대한 자동 완성 프롬프트 기능을 구현하는 것은 매우 간단합니다. 입력 상자의 입력 이벤트를 듣고 기존 데이터를 기반으로 프롬프트 옵션을 생성 및 표시한 다음 사용자가 옵션을 선택할 때 입력 상자의 값을 채우면 됩니다. 이를 통해 사용자는 정확한 정보를 보다 편리하게 입력할 수 있어 사용자 경험이 향상됩니다. 이 기사의 소개가 모든 사람에게 도움이 되기를 바랍니다. 🎜

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