Friday, July 14, 2023

How to show suggestions in an input tag in HTML

To show suggestions in an input tag in HTML 

you can use the `datalist` element along with the `input` element. The `datalist` element provides a list of predefined options that can be associated with an input field. Here's an example:

<label for="myInput">Choose a fruit:</label>

<input type="text" id="myInput" list="fruits">

<datalist id="fruits">

<option value="Apple">

<option value="Banana">

<option value="Orange">

<option value="Mango">

<option value="Strawberry">

</datalist>

show suggestions in an input tag in HTML


In the example above, we have an input field with the ID "myInput" and a `datalist` element with the ID "fruits." The `datalist` element contains a list of fruit options.


When the user types in the input field, the browser will display the available suggestions based on the options defined in the `datalist`. The user can either choose an option from the dropdown or continue typing their own input.


Note that the suggestions are provided by the browser, and their appearance and behavior may vary slightly depending on the browser being used.

No comments:

Post a Comment