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:

       
  
 请输入内容  
 
    

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 thestyles.cssfile, 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 todisplay: 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 thescript.jsfile, 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) { $('
').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!