Out4Mind O seu portal multi-temático
O HTML5 trouxe-nos várias novas funcionalidades interessantes. Uma delas é a “datalist” que vou abordar neste artigo.
Uma datalist permite definir um conjunto de valores que poderão ser usados numa caixa de introdução de texto (<input type=”text”>). Ao ligar um elemento “<input>” a uma “<datalist>”, podemos “clicar” na caixa e aparecerá uma lista de valores pré-definidos. No Google Chrome aparece uma seta que permite mostrar a lista. Podemos então seleccionar um dos valores e este será preenchido na caixa de texto.
Por outro lado, se começarmos a introduzir texto, esta lista vai apresentando apenas os valores que começam pelo texto que introduzimos. Se não existirem valores que comecem pelo texto que foi introduzido, a lista ficará em branco. Note que, ao usar uma <datalist>, não estamos a limitar o que podemos introduzir na caixa de texto. Para tal, usaríamos uma caixa do tipo “drop down” – elemento <select>. A <datalist> permite apenas sugerir um conjunto de valores pré-definidos.
Vejamos um exemplo. Pretendemos pedir ao utilizador que introduza o nome de uma fruta. Podemos ter um conjunto de nomes de frutos pré-definidos para sugerir ao utilizador:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5 DataList</title>
</head>
<body>
<datalist id="frutas">
<option value="Cereja"/>
<option value="Laranja"/>
<option value="Limão"/>
<option value="Maçã"/>
<option value="Morango"/>
<option value="Pêssego"/>
</datalist>
<p>Fruta: <input type="text" list="frutas"/></p>
</body>
</html>
O resultado deste exemplo será:
Poderá testar este código em: http://cmmps.me/code_examples/datalist_pt.html
Uma utilização mais avançada será ter código no lado do servidor e uma tabela com, por exemplo, nomes de cidades numa base de dados. Nos exemplos que se seguem, vou assumir que essa base de dados já existe, assim como uma tabela chamada “cities” que contém, pelo menos, o campo “city“.
Vejamos o aspecto usando JSP (Java Server Pages) e uma base de dados em PostgreSQL.
<%@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://servidor/basededados", "utilizador", "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>
O resultado desta página é:
Poderá ver este exemplo a funcionar em: http://www.cmmps.me/jsp/code_examples/datalist.jsp
Por fim, vejamos ainda uma implementação em PHP com uma base de dados MySQL.
<!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('servidor', 'utilizador', 'password', 'base de dados', 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>
O resultado será idêntico ao anterior.
Poderá ver este exemplo a funcionar em: http://cmmps.me/code_examples/datalist.php
Este artigo foi escrito de acordo com a antiga grafia.
