How to create a dynamic text input box prompt using HTML, CSS and jQuery-JS Tutorial-php.cn

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

王林

Release： 2023-10-24 09:16:49

Original

1519 people have browsed it

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

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>

Copy after login

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

Copy after login

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

Copy after login

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!