HTML datalist#

A Datasette feature suggestion concerning autocomplete against a list of known values inspired me to learn how to use the HTML <datalist> element (see MDN).

It’s really easy to use! It allows you to attach a list of suggested values to any input text box, and browsers will then suggest those while the user is typing - while also allowing them to type something entirely custom.

Here’s a basic example:

1
<input type="text" list="party" name="political_party">
2

3
<datalist id="party">
4
<option value="Anti-Administration">
5
<option value="Pro-Administration">
6
<option value="Republican">
7
<option value="Federalist">
8
<option value="Democratic Republican">
9
<option value="Pro-administration">
10
<option value="Anti-administration">
11
<option value="Unknown">
12
<option value="Adams">
13
<option value="Jackson">
14
<option value="Jackson Republican">
15
<option value="Crawford Republican">
16
<option value="Whig">
17
<option value="Jacksonian Republican">
18
<option value="Jacksonian">
19
<option value="Anti-Jacksonian">
20
<option value="Adams Democrat">
21
<option value="Nullifier">
22
<option value="Anti Mason">
23
<option value="Anti Masonic">
24
<option value="Anti Jacksonian">
25
<option value="Democrat">
26
<option value="Anti Jackson">
27
<option value="Union Democrat">
28
<option value="Conservative">
29
<option value="Ind. Democrat">
30
<option value="Independent">
31
<option value="Law and Order">
32
<option value="American">
33
<option value="Liberty">
34
<option value="Free Soil">
35
<option value="Ind. Republican-Democrat">
36
<option value="Ind. Whig">
37
<option value="Unionist">
38
<option value="States Rights">
39
<option value="Anti-Lecompton Democrat">
40
<option value="Constitutional Unionist">
41
<option value="Independent Democrat">
42
<option value="Unconditional Unionist">
43
<option value="Conservative Republican">
44
<option value="Ind. Republican">
45
<option value="Liberal Republican">
46
<option value="National Greenbacker">
47
<option value="Readjuster Democrat">
48
<option value="Readjuster">
49
<option value="Union">
50
<option value="Union Labor">
51
<option value="Populist">
52
<option value="Silver Republican">
53
<option value="Free Silver">
54
<option value="Silver">
55
<option value="Democratic and Union Labor">
56
<option value="Progressive Republican">
57
<option value="Progressive">
58
<option value="Prohibitionist">
59
<option value="Socialist">
60
<option value="Farmer-Labor">
61
<option value="American Labor">
62
<option value="Nonpartisan">
63
<option value="Coalitionist">
64
<option value="Popular Democrat">
65
<option value="Liberal">
66
<option value="New Progressive">
67
<option value="Republican-Conservative">
68
<option value="Democrat-Liberal">
69
<option value="AL">
70
<option value="Libertarian">
71
</datalist>

And here’s what that looks like in Firefox:

Animation showing autocomplete against that list

Creating them in JavaScript#

You can also create these in JavaScript using the DOM, for example:

1
var parties = [
2
  "Anti-Administration",
3
  "Pro-Administration",
4
  "Republican",
5
  "Federalist",
6
  "Democratic Republican",
7
  "Pro-administration",
8
  "Anti-administration",
9
  "Unknown",
10
  "Adams",
11
  "Jackson"
12
];
13
var datalist = document.createElement("datalist");
14
datalist.id = "parties";
15
parties.forEach(function (party) {
16
    var option = document.createElement("option");
17
    option.value = party;
18
    datalist.appendChild(option);
19
});
20
document.body.appendChild(datalist);

Then use input.setAttribute('id', 'parties') on any input elemnt you want to use that new datalist.