Out4Mind Your multi-thematic blog
HTML5 brought several new interesting features. One of them is the datalist that I will address in this post.
A datalist allow us to define a set of values that could be used in a text box (<input type=”text”>). By binding one “<input>” element to a “<datalist>”, you will be able to click on the text box and see a list of pre-defined values. In Google Chrome you can also find an arrow at the end of the text box to show the list. Then, we can select one of the values and it will be written in the text box.
If we start entering some text, the list will only show you the values that contain that text. If there are no values that contain that text, the list will be empty. Notice that, by using a <datalist>, we are not limiting the values we can enter in the text box. For that, we should use a drop down box instead (element <select>). The <datalist> can be used to suggest a set of pre-defined values.
Let’s see an example. We want to ask the user to enter the name of a fruit. We can have a pre-defined set of fruit names to make a suggestion to the user:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5 DataList</title>
</head>
<body>
<datalist id="fruits">
<option value="Apple"/>
<option value="Cherry"/>
<option value="Lemon"/>
<option value="Orange"/>
<option value="Peach"/>
<option value="Strawberry"/>
</datalist>
<p>Fruit: <input type="text" list="fruits" /></p>
</body>
</html>
The result of this example will be:
You can try this code at: http://cmmps.me/code_examples/datalist_en.html
A more advanced usage of a datalist could have a server-side code and a table with, for instance, some names of Portuguese cities in a database. In the following examples, I will assume that that database already exist with a table called “cities” and with a column named “city”.
If we use JSP (Java Server Pages) and a PostgreSQL database, we can have something like this:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.DriverManager, java.sql.Connection, java.sql.ResultSet"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5 DataList</title>
</head>
<body>
<datalist id="cities">
<%
Class.forName("org.postgresql.Driver");
Connection cn = DriverManager.getConnection("jdbc:postgresql://server/database", "user", "password");
String sql = "SELECT city FROM public.cities ORDER BY city";
ResultSet rs = cn.createStatement().executeQuery(sql);
while (rs.next()) {
String city = rs.getString("city");
%>
<option value="<%=city%>"/>
<%
}
rs.close();
cn.close();
%>
</datalist>
<p>Cidade / City: <input type="text" list="cities"/></p>
</body>
</html>
The result of this page is: 
You can try this code here: http://www.cmmps.me/jsp/code_examples/datalist.jsp
To end with, let’s now take a look at a code written in PHP with a MySQL database:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5 DataList</title>
</head>
<body>
<datalist id="cities">
<?php
$db = new mysqli('server', 'user', 'password', 'schema', 3309);
$sql = 'SELECT city FROM cities ORDER BY city';
$rs = $db->query($sql);
while ($row = $rs->fetch_assoc()) {
$city = $row['city'];
?>
<option value="<?php echo $city; ?>" />
<?php
}
$rs->close();
$db->close();
?>
</datalist>
<p>Cidade / City: <input type="text" list="cities"/></p>
</body>
</html>
The result will be similar to the previous solution.
You can try this code at: http://cmmps.me/code_examples/datalist.php
