Using the Datalist Element for Predefined Input Suggestions

The <datalist> element in HTML is used to create a predefined list of options for an <input> element. It allows the user to select an option from the list while also giving them the ability to enter their own value if they choose. The list of predefined values remains hidden until the user starts typing in the associated text field. The <datalist> is paired with an id attribute, and the <input> is linked to it using the list attribute.

index.html

<label for="country">My country is</label>

<option value="Canada">Canada</option>

<option value="Australia">Australia</option>

<option value="New Zealand">New Zealand</option>

</datalist>

<button type="submit">Submit</button>

</form>

Overall, the <datalist> element can be a helpful way to provide a pre-defined list of options for users to select from, while still allowing them the flexibility to enter their own value if needed.

Example

When the user starts typing in the category input field, the browser will display the predefined categories from the datalist. If none of the options match the user's input, they can still type their own category. This allows the user to choose from a list and manually input a value if necessary.

index.html

<label for="category">Select a product category</label>

</datalist>

<button type="submit">Submit</button>

</form>

<label for="category">: labels the input field, indicating to the user that they should select or enter a product category;
<input type="text" name="category" id="category" list="categories"/>: the input field where the user can either type a category or select from the available options. The list="categories" attribute links this input to the datalist with the ID categories;
<datalist id="categories">: this contains a list of predefined product categories. These options will appear as suggestions when the user starts typing in the input field;
<option value="...">: each option represents a product category in the list. The user can select one of these categories or type their own value if it doesn't match any of the options.