Home > Article > Web Front-end > How to create a dynamic text input box prompt using HTML, CSS and jQuery

How to create a dynamic text input box prompt using HTML, CSS and jQuery

王林Original: 2023-10-24 09:16:491404browse

How to use HTML, CSS and jQuery to create a dynamic text input box prompt

In web development, dynamic text input box prompts are often used to provide better user experience. By displaying possible input options in real time, you can help users quickly choose the right content. This article will teach you how to use HTML, CSS and jQuery to create a dynamic text input box prompt to improve the user's interactive experience.

To implement this function you need to use HTML, CSS and jQuery. First, we start by creating a simple HTML structure as shown below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态文本输入框提示</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <label for="input">请输入内容</label>
        <input type="text" id="input" autocomplete="off">
        <ul id="suggestions"></ul>
    </div>

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

In the above HTML code, we create a container that contains an input box and an unordered list that displays the suggested content. By adding a label, we can provide prompt information related to the input box.

Next, we need to write CSS styles to beautify our input box and suggested content. In the styles.css file, we can add the following code:

.container {
    position: relative;
    width: 300px;
    margin: 0 auto;
    padding-top: 20px;
}

label {
    display: block;
    margin-bottom: 10px;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    font-size: 16px;
}

ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

ul li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

In the above CSS code, we set the overall container style and make changes to the input box and suggested content Some basic style definitions. Note that we set the display status of the suggested content list to display: none; so that it can be displayed dynamically when the user enters content.

Finally, we need to use jQuery to write some scripts to implement the prompt function of the text input box. In the script.js file, we can add the following code:

$(document).ready(function() {
    $('#input').on('input', function() {
        var input = $(this).val().toLowerCase();
        
        if (input.length > 0) {
            $('#suggestions').empty().show();
            
            // 模拟异步获取建议内容
            setTimeout(function() {
                var suggestions = ['apple', 'banana', 'cherry', 'durian', 'elderberry', 'fig', 'grape', 'honeydew'];
                
                suggestions.forEach(function(item) {
                    if (item.indexOf(input) > -1) {
                        $('<li>').text(item).appendTo('#suggestions');
                    }
                });
            }, 300);
        } else {
            $('#suggestions').empty().hide();
        }
    });
    
    $('body').on('click', '#suggestions li', function() {
        var text = $(this).text();
        $('#input').val(text);
        $('#suggestions').empty().hide();
    });
});

In the above JavaScript code, we first pass $('#input').on(' input', function() { ... }) to monitor the input event of the input box. When the user starts typing, we get the input content and perform recommended filtering and display based on the content. To simulate actual suggestion content acquisition, we used a timer and defined some sample suggestions content.

When the user clicks on an item in the recommended content, we will fill the content of the selected item into the input box and hide the recommended content list.

So far, we have completed the implementation of dynamic text input box prompts. Through the combination of HTML, CSS and jQuery, we can improve the user experience by displaying matching suggestions in real time as the user types.

I hope this article can help you understand how to use HTML, CSS and jQuery to create a dynamic text input box prompt, and provides specific code examples for your reference. I wish you success in web development!

The above is the detailed content of How to create a dynamic text input box prompt using HTML, CSS and jQuery. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery css html JS function 事件 display input

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use Layui to achieve image dragging and zooming effectsNext article：How to use Layui to achieve image dragging and zooming effects

See more

How to create a dynamic text input box prompt using HTML, CSS and jQuery

Related articles