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 explorerfirefoxopera 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.
        JSP Page

Data List Validation

<linkrel="stylesheet"href=""> <script src=""></script> <script src=""> </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

Previous Post Next Post