基于输入提供常见词语建议的HTML & JavaScript示例

2024-10-16

示例场景：打字助手

接下来，我们将创建一个简单的打字辅助工具，用户可以在文本框中输入单词，并根据他们所输入的内容自动提供常见的词语建议。这个想法是通过键盘事件来实现“建议”功能。

步骤1: HTML 结构

首先，我们为设置一个包含文本输入字段和一些CSS样式的HTML结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打字助手</title>
    <style>
        .typingAssistant {
            margin: 20px;
            border: 1px solid #ccc;
            padding: 5px;
            width: 300px;
            height: 100px;
            font-size: 24px;
        }
    </style>
</head>
<body>

<textarea id="typingAssistantText" placeholder="输入你的单词..."></textarea>
<div class="suggest">
    <p>常见的词语建议</p>
    <ul id="suggestionsList"></ul>
</div>

<script src="script.js"></script>
</body>
</html>

步骤2: JavaScript 实现

现在，我们将实现用户可以通过键盘输入文本并显示建议的单词功能。

document.addEventListener('DOMContentLoaded', function() {
    const typingAssistantText = document.getElementById("typingAssistantText");
    const suggestionsList = document.getElementById("suggestionsList");

    // 更新建议基于当前输入
    function updateSuggestions() {
        const userInput = typingAssistantText.value.toLowerCase();
        const commonWords = ["apple", "banana", "cherry", "date", "elderberry"];
        let suggestedWords = [];

        if (userInput.length > 1) {
            for (let i = 0; i < commonWords.length; i++) {
                if (commonWords[i].toLowerCase().startsWith(userInput)) {
                    suggestedWords.push(commonWords[i]);
                }
            }

            // 对排序和避免重复建议进行处理
            suggestedWords.sort((a, b) => a.localeCompare(b));
            suggestedWords = suggestedWords.slice(0, 5); // 显示最多前5个常见的词语

            suggestionsList.innerHTML = "";
            for (let i = 0; i < suggestedWords.length; i++) {
                const listItem = document.createElement("li");
                listItem.textContent = suggestedWords[i];
                suggestionsList.appendChild(listItem);
            }
        } else {
            suggestionsList.innerHTML = "<p>无建议</p>";
        }
    }

    // 当输入字段变化时更新建议
    typingAssistantText.addEventListener('input', updateSuggestions);

    // 初始化基于空文本框的建议显示
    updateSuggestions();
});

解释

  1. HTML 结构: 我们有一个textarea用于输入和一个区域显示常见的词语建议。
  2. JavaScript:
    • 我们监听文档完全加载后的事件，即DOMContentLoaded事件时，这在HTML文档被解析和渲染后发生。
    • 根据用户在文本框中输入的内容动态更新建议列表。
    • 如果还没有输入任何内容（即没有字符），我们将在空文本框中显示一个默认的建议：“无建议”。

这个示例展示了如何使用键盘事件动态地提供基于当前输入的建议。这只是一个许多你可以在前端应用中利用键盘交互增强用户体验的方式之一。 ### 解释和代码

1. HTML 结构

我们设计了一个简单的表单，其中包括一个<textarea>用于用户输入文本，并且在下方显示一些常见的词语建议。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打字助手</title>
    <style>
        .typingAssistant {
            margin: 20px;
            border: 1px solid #ccc;
            padding: 5px;
            width: 300px;
            height: 100px;
            font-size: 24px;
        }
    </style>
</head>
<body>

<textarea id="typingAssistantText" placeholder="输入你的单词..."></textarea>
<div class="suggest">
    <p>常见的词语建议</p>
    <ul id="suggestionsList"></ul>
</div>

<script src="script.js"></script>
</body>
</html>

2. JavaScript 实现

我们编写了一个JavaScript脚本来实现基于当前输入的建议功能。

document.addEventListener('DOMContentLoaded', function() {
    const typingAssistantText = document.getElementById("typingAssistantText");
    const suggestionsList = document.getElementById("suggestionsList");

    // 更新建议基于当前输入
    function updateSuggestions() {
        const userInput = typingAssistantText.value.toLowerCase();
        const commonWords = ["apple", "banana", "cherry", "date", "elderberry"];
        let suggestedWords = [];

        if (userInput.length > 1) {
            for (let i = 0; i < commonWords.length; i++) {
                if (commonWords[i].toLowerCase().startsWith(userInput)) {
                    suggestedWords.push(commonWords[i]);
                }
            }

            // 对排序和避免重复建议进行处理
            suggestedWords.sort((a, b) => a.localeCompare(b));
            suggestedWords = suggestedWords.slice(0, 5); // 显示最多前5个常见的词语

            suggestionsList.innerHTML = "";
            for (let i = 0; i < suggestedWords.length; i++) {
                const listItem = document.createElement("li");
                listItem.textContent = suggestedWords[i];
                suggestionsList.appendChild(listItem);
            }
        } else {
            suggestionsList.innerHTML = "<p>无建议</p>";
        }
    }

    // 当输入字段变化时更新建议
    typingAssistantText.addEventListener('input', updateSuggestions);

    // 初始化基于空文本框的建议显示
    updateSuggestions();
});

解释

  1. HTML 结构:

    • textarea用于用户输入文本，提供一个方便的方式来输入内容。
    • 在下方放置了一个标题“常见的词语建议”，并且是一个无序列表(UL)来展示建议。

  2. JavaScript 实现:

    • 我们监听文档完全加载后的事件，即在HTML文档被解析和渲染后发生。这有助于确保任何需要在页面上运行的脚本代码能够正确执行。
    • updateSuggestions 函数接受用户输入并进行处理：首先将文本转换为小写以便进行比较，然后检查输入中的前几个字符是否与常见的词语列表中的一部分匹配。如果是，则添加到“建议”列表中。
    • 如果没有提供任何输入（即整个表单为空），我们向列表中添加一条无建议的提示。

  3. 更新建议:

    • 每当用户在文本框中改变时，我们的脚本会调用updateSuggestions函数，这将导致根据新的输入内容显示相应的建议。
    • 列表的内容是基于前5个最常见的词语进行排序和分组的，并且只保留最多前5个词以保持列表简洁。

这个示例展示了如何使用JavaScript动态地为用户提供与当前文本输入相关的建议。希望这段代码对你有所帮助！

Blog Post Image