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

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

王林

풀어 주다： 2023-10-20 16:01:49

원래의

777명이 탐색했습니다.

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

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

소개: 양식 입력 상자 내용의 자동 프롬프트 기능은 웹 애플리케이션에서 매우 일반적입니다. 이 기능은 사용자가 올바른 내용을 빠르게 입력하는 데 도움이 됩니다. 이 문서에서는 JavaScript를 사용하여 이 기능을 구현하는 방법을 설명하고 특정 코드 예제를 제공합니다.

HTML 구조 만들기

먼저 입력 상자와 자동 제안 목록이 포함된 HTML 구조를 만들어야 합니다. 다음 코드를 사용할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <title>表单输入框内容自动提示</title>
</head>
<body>
    <input type="text" id="myInput" onkeyup="showHint()">
    <p id="hint"></p>
</body>
</html>

로그인 후 복사

이 예에서는 입력 상자를 만들고 onkeyup 이벤트를 사용하여 showHint() 함수를 호출하고 단락 태그를 만듭니다. 자동 제안 콘텐츠를 표시하는 데 사용됩니다. onkeyup 事件调用 showHint() 函数，同时在页面上创建一个段落标签用于显示自动提示的内容。

编写 JavaScript 代码

接下来，我们需要在 JavaScript 中实现自动提示的功能。可以使用以下代码：

function showHint() {
    var input = document.getElementById("myInput").value;
    var hint = document.getElementById("hint");

    // 在这里进行数据查询，获取提示列表
    var hints = getHints(input);

    if (hints.length > 0) {
        hint.innerHTML = hints.join(", "); // 将提示内容拼接为字符串，并显示在页面上
    } else {
        hint.innerHTML = ""; // 如果没有提示内容，则清空提示
    }
}

function getHints(input) {
    // 这里可以根据实际需求，从服务器或本地数据获取提示列表
    // 并根据输入的内容进行筛选和匹配

    // 假设这里是一个静态的提示列表
    var hints = ["apple", "banana", "cherry", "date", "elderberry", "fig", "grape"];

    // 根据输入的内容进行筛选和匹配
    hints = hints.filter(function(item) {
        return item.toLowerCase().indexOf(input.toLowerCase()) > -1;
    });

    return hints;
}

로그인 후 복사

在这个例子中，showHint() 函数会在输入框的内容发生变化时触发。它会获取输入框的值，并调用 getHints() 函数获取提示列表。然后，根据列表的长度决定是否显示提示内容。

getHints()

<style>
    #myInput {
        padding: 10px;
        font-size: 16px;
    }

    #hint {
        margin-top: 10px;
        font-size: 14px;
        color: gray;
    }
</style>

로그인 후 복사

이 예에서는 입력 상자의 내용이 변경될 때 showHint() 함수가 트리거됩니다. 입력 상자의 값을 가져오고 getHints() 함수를 호출하여 힌트 목록을 가져옵니다. 그런 다음 목록 길이에 따라 프롬프트 내용을 표시할지 여부를 결정합니다.

getHints() 함수는 입력 콘텐츠를 기반으로 힌트와 필터 및 일치 항목의 정적 목록을 가정하는 간단한 예입니다. 실제 응용 프로그램에서는 필요에 따라 서버나 로컬 데이터에서 프롬프트 목록을 얻을 수 있으며 일치를 위해 더 복잡한 알고리즘을 사용할 수 있습니다.

페이지를 더 아름답게 만들기 위해 입력 상자와 프롬프트 목록에 몇 가지 스타일을 추가할 수 있습니다. 다음 코드를 사용할 수 있습니다:

이 예에서는 입력 상자의 패딩과 글꼴 크기, 프롬프트 목록의 상단 여백, 글꼴 크기 및 색상을 설정했습니다.

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