The datalist tag is introduced in HTML5.
The <datalist> tag specifies a list of pre-defined options for an <input> element.
The HTML <datalist> tag is is used to provide an auto complete feature for an <input> element.
It provides a list of predefined options to the users to select data.
The <datalist> tag should be used with an <input> element that contains.
NOTE: The numbers of a browser that fully supports the <datalist> element: internet explorer, firefox, opera mini, and Google but it Not Support in Safari and Older Browsers.
If you want to know how to load Dynamic or JSON data in Datalist you can ClickHere.
Validate the input value that comes from Datalist. Datalist is an HTML5 element However we can validate Datalist. Here is a <datalist> Validation.
Here is Some screenShot which you get idea of its working
The <datalist> tag specifies a list of pre-defined options for an <input> element.
The HTML <datalist> tag is is used to provide an auto complete feature for an <input> element.
It provides a list of predefined options to the users to select data.
The <datalist> tag should be used with an <input> element that contains.
NOTE: The numbers of a browser that fully supports the <datalist> element: internet explorer, firefox, opera mini, and Google but it Not Support in Safari and Older Browsers.
If you want to know how to load Dynamic or JSON data in Datalist you can ClickHere.
Validate the input value that comes from Datalist. Datalist is an HTML5 element However we can validate Datalist. Here is a <datalist> Validation.
<html>
JSP Page
<body>
Data List Validation
<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script type="text/javascript">
function checkvalidatdatalist()
{
//your input value
if(document.getElementById("empSuggestion").value == "" ||
document.getElementById("empSuggestion").value==null|| document.getElementById("empSuggestion").value== -1)
{
document.getElementById("error").innerHTML = "Please Type Employee Name or Code
";
$('#empSuggestion').css('border-color', 'red');
return false;
} else {
//getting value of empSuggestion
var emp = $("#empSuggestion").val();
var datalist = $("datalist#empSuggestionlist").find("option[value='" + emp + "']");
//if value is Present in datalist then condition is true.else false
if (datalist != null && datalist.length > 0) {
$('#empSuggestion').css('border-color', '');
//this id='error' show error on top
document.getElementById("error").innerHTML = "";
var emp = $("#empSuggestion").val();
alert('Successfully Validate');
document.yourformname.action = "Your controller or action class";
document.yourformname.submit();
} else {
document.getElementById("error").innerHTML="Employee Name or Code In Valid
";
$('#empSuggestion').css('border-color', 'red');
return false;
}} }
</script>
</body>
</html>
Here is Some screenShot which you get idea of its working
 |
| DataList Option |
This is an Image if User submit Blank to Input <Field>
 |
| Blank DataList |
This is an image if User Put a Wrong value which is not Present in DataList then This Error Occurs
Invalid Input
If all thing is Correct then its Going Submit
 |
| Output |