Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to display Suggestions for input Field in HTML?
HTML has a placeholder and required attribute inside the input elements that can be used to display the Suggestions for input Field in HTML. The input element in HTML specifies the input field where the user can fill the data. The placeholder attributes define the suggestion in the input box.
Visual Representation of Input Field Suggestion
Syntax
<input type = "type_name" required>
The required is defined by a boolean attribute that specifies the input field must be submitted.
<input type = "type_name" placeholder = "write something for suggestion ">
The input element is used to create the user enter data. The placeholder attribute is defined by giving suggestions to the input field.
<datalist id= "id_name"> <option></option> <option></option> <datalist>
The datalist element is the autocomplete feature to provide the dropdown list. The option element is defined the entering the list of the data.
Properties Used
The following properties used in the examples are −
background-color − Define the body background color.
color − Define the color of the text.
text-align − To set each element in the center of the body.
Example 1
In the following example, we will use two labels inside the form that defines the text label for an input element. Then use the input element to set the required attribute that will show the suggestion when users don’t enter any text and click the submit button.
<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
</head>
<body>
<h1>The input field suggestion in HTML</h1>
<form>
<label for="fname">First name:</label><br>
<input type="text" required/><br><br>
<label for="Email">Enter your email:</label><br>
<input type="email" required /> <br><br>
<input type="submit" value="Submit Now!">
</form>
</body>
</html>
Example 2
In the following example, the font style selection suggestion box for an input field is implemented using this HTML code. The options available to users include Arial, Verdana, Helvetica, Sans Serif, Calibiri, Roman, and Algebrian. As the user types, the input field offers suggestions and a decision-making process. Users who may not be familiar with the available font styles will find this feature especially helpful as it provides suggestions. The suggestion box can also be altered to match the style and color scheme of the website. Overall, the user experience and usability of this input field with a suggestion box are improved.
<!DOCTYPE html>
<html>
<title>Suggestion the input field box</title>
<head>
</head>
<body style = "background-color: grey; text-align:center;">
<h1 style = "color : white;">Display the suggestion for input field</h1>
<label for = "fontstyle">
Choose Your Favourite Font Style:
</label>
<div class=>
<input type="text" list="fontstyle" placeholder="Please Select"/>
<datalist id="fontstyle">
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
<option value="Helveltica">Helveltica</option></option>
<option value="Sans Serif">Sans Serif</option>
<option value="Calibiri">Calibiri</option>
<option value="Roman">Roman</option>
<option value="Algebrian">Algebrian</option>
</datalist>
</div>
</body>
</html>
Example 3
The HTML code implements a simple search autocomplete feature. It has a label, an input box where the user may type in their search query, an unordered list where the search results are displayed, and a script that provides the search operation.
The CSS styles the unordered list to have no list style and a border, with padding and a cursor pointer on each list item. When a list item is hovered over the search list, the background color changes to yellow.
The search functionality is defined by the JavaScript code. It generates an array of strings to represent the search data and adds an event listener to the search input form to monitor for input. When the user types in the search input field, the search data is filtered based on the input query, and the matching results are displayed in an unordered list. The search results are produced dynamically in JavaScript code using the createElement method. When a list item is clicked, the text of the clicked item is entered into the search input area, and the search results are removed. In addition, an event listener is attached to the document to detect clicks outside the search input area and the search results, which will result in the search results being removed.
<!DOCTYPE html>
<html>
<head>
<title>Search Autocomplete Example</title>
<style>
#search-results {
position: absolute;
z-index: 1;
list-style-type: none;
margin: 0px;
padding: 0px; }
#search-results li {
padding: 5px;
cursor: pointer; }
#search-results li:hover {
background-color: yellow; }
</style>
</head>
<body>
<label for="search-input">Enter the state:</label><br>
<input type="text" id="search-input" name="search-input">
<ul id="search-results"></ul>
<script>
let searchInput = document.getElementById('search-input');
let searchResults = document.getElementById('search-results');
// define your search data as an array of strings
let searchData = [
'Andhra Pradesh', 'Arunachal Pradesh', 'Assam', 'Bihar', 'Chhattisgarh', 'Goa', 'Gujarat', 'Haryana', 'Himachal Pradesh', 'Jharkhand', 'Karnataka', 'Kerala', 'Madhya Pradesh', 'Maharashtra', 'Manipur', 'Meghalaya', 'Mizoram', 'Nagaland', 'Odisha', 'Punjab', 'Rajasthan', 'Sikkim', 'Tamil Nadu', 'Telangana', 'Tripura', 'Uttarakhand', 'Uttar Pradesh', 'West Bengal'
];
// function to filter search results
function filterResults(query) {
return searchData.filter(item => item.toLowerCase().includes(query.toLowerCase()));
}
// function to display search results
function displayResults(results) {
searchResults.innerHTML = '';
results.forEach(result => {
let li = document.createElement('li');
li.textContent = result;
li.addEventListener('click', () => {
searchInput.value = result;
searchResults.innerHTML = '';
});
searchResults.appendChild(li);
});
}
// event listener for search input
searchInput.addEventListener('input', () => {
let query = searchInput.value;
if (query === '') {
searchResults.innerHTML = '';
} else {
let results = filterResults(query);
displayResults(results);
}
});
// event listener to close search results when clicking outside the input and the results
document.addEventListener('click', (event) => {
let isClickInsideInput = event.target === searchInput;
let isClickInsideResults = searchResults.contains(event.target);
if (!isClickInsideInput && !isClickInsideResults) {
searchResults.innerHTML = '';
}
});
</script>
</body>
</html>
Conclusion
We saw how to create an input field with the help of an input tag. To generate the autocomplete feature it needs the datalist tag which defined all the dropdown lists. Then using of option tag we stored the list of items. The example wants to tell us that whenever any website provides the facility autocomplete feature, the website attracts user interaction.
3K+ Views
