javascript写的一个表单动态输入提示的代码

2023年6月10日下午8:20 • JavaScript

要实现JavaScript写的一个表单动态输入提示，我们需要使用以下步骤：

HTML页面中创建表单输入框及提示框的DOM节点；
监听表单输入框的keyup事件，获取输入框中输入的内容；
根据输入的内容动态生成提示框中的内容；
实现鼠标移动到提示框中的选项可以高亮并填充到输入框中；
实现键盘上下键可以在提示框中切换选项并填充到输入框中；
实现鼠标点击或回车键可以将选中的选项填充到输入框中。

下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单动态输入提示</title>
</head>
<body>
    <form>
        <label for="search">Search:</label>
        <input type="text" id="search" name="search">
        <div id="tip"></div>
    </form>
    <script>
        const searchInput = document.querySelector('#search');
        const tipDiv = document.querySelector('#tip');
        let dataList = ['apple', 'banana', 'cherry', 'date', 'elderberry', 'fig', 'grape', 'honeydew'];

        searchInput.addEventListener('keyup', function(e) {
            let inputValue = e.target.value;
            if (inputValue) {
                let filterDataList = dataList.filter(item => item.toLowerCase().includes(inputValue.toLowerCase()));
                let showTip = "";
                for (let i = 0; i < filterDataList.length; i++) {
                    showTip += `<div class="item">${filterDataList[i]}</div>`
                }
                tipDiv.innerHTML = showTip;
            } else {
                tipDiv.innerHTML = "";
            }
        });

        tipDiv.addEventListener('mouseover', function(e) {
            if (e.target.classList.contains('item')) {
                removeClass();
                e.target.classList.add('active');
            }
        });

        tipDiv.addEventListener('mouseout', function(e) {
            if (e.target.classList.contains('item')) {
                e.target.classList.remove('active');
            }
        });

        tipDiv.addEventListener('mousedown', function(e) {
            if (e.target.classList.contains('item')) {
                searchInput.value = e.target.innerText;
                tipDiv.innerHTML = "";
            }
        });

        function removeClass() {
            const activeElement = document.querySelector('.active');
            if (activeElement) {
                activeElement.classList.remove('active');
            }
        }
    </script>
</body>
</html>

在这个示例代码中，我们创建了一个表单输入框和一个提示框的DOM节点。在输入框中输入的内容触发keyup事件，获取输入框中输入的内容，并根据输入的内容动态生成提示框中的内容。在提示框中，我们绑定了鼠标mouseover事件和mousedown事件，用户可以通过鼠标在提示框中选取内容并填充到输入框中。同时我们也实现了键盘上下键的监听，用户可以通过键盘上下键在提示框中快速切换选项并填充到输入框中。

以上是一个示例代码的实现，如果需要更多的表单动态输入提示效果，可以在以上示例代码基础上进行扩展。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript写的一个表单动态输入提示的代码 - Python技术站