How to use JavaScript to realize the automatic completion prompt function of the input box content of the form?-JS Tutorial-php.cn

How to use JavaScript to realize the automatic completion prompt function of the input box content of the form?

王林

Release： 2023-10-24 12:19:46

Original

1560 people have browsed it

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

How to use JavaScript to implement the automatic completion prompt function of the input box content of the form?

With the development of the Internet, the automatic completion prompt function of form input boxes is becoming more and more common. When users enter content, possible completion options will be provided based on existing data to facilitate users to quickly select or enter the correct information. This article will introduce how to use JavaScript to implement the automatic completion prompt function of the input box content of the form, and provide specific code examples.

Step One: Create HTML Structure

First, we need to create a simple HTML structure and add a text input box to it. An example is as follows:

<!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>

Copy after login

In the above code, we create a text input box with the id "inputBox" and disable the default auto-complete function (autocomplete="off" ). In addition, we also created an empty unordered list ul to display the auto-completion prompt options.

Step 2: Implement the JavaScript function

Next, we use JavaScript to implement the form’s auto-complete prompt function. In the code, we will listen to the keyboard events of the input box. When the user enters content, the auto-complete prompt options will be generated and displayed based on the existing data.

// 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;
});

Copy after login

In the above code, we first obtain the input box element and the list element of the prompt option. Then, we simulated an existing set of data. Next, we listen to the input event of the input box and trigger the handler function when the user enters content.

The processing function first obtains the value of the input box, and then clears the prompt option list. Afterwards, the prompt options that meet the conditions are filtered out from the existing data based on the input content. During the filtering process, we used the includes method to determine whether the existing data contains the input content. Finally, we add the generated prompt options to the prompt options list one by one.

In addition, we also listened to the click event of the prompt option list. When the user clicks on a prompt option, the value of the option is filled in the input box.

Summary:

It is very simple to use JavaScript to implement the automatic completion prompt function of the input box content of the form. We only need to listen to the input event of the input box, generate and display prompt options based on existing data, and then fill in the value of the input box when the user selects an option. In this way, users can enter correct information more conveniently, improving the user experience. I hope the introduction in this article can help everyone.

The above is the detailed content of How to use JavaScript to realize the automatic completion prompt function of the input box content of the form?. For more information, please follow other related articles on the PHP Chinese website!