Step 1: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data List Example</title>
<style>
*, *:before, *:after {
box-sizing: border-box;
}
html {
font-family: Helvetica, Arial, sans-serif;
font-size: 100%;
background: #333;
-webkit-font-smoothing: antialiased;
}
#page-wrapper {
width: 640px;
background: #fff;
padding: 1em;
margin: 1em auto;
border-top: 5px solid #69c773;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
h1 {
margin-top: 0;
}
label {
display: block;
margin-top: 2em;
margin-bottom: 0.5em;
color: #999;
}
input {
width: 100%;
padding: 0.5em;
font-size: 1.2em;
border-radius: 3px;
border: 1px solid #d9d9d9;
}
button {
display: inline-block;
border-radius: 3px;
border: none;
font-size: 0.9rem;
padding: 0.5rem 0.8rem;
background: #69c773;
border-bottom: 1px solid #498b50;
color: white;
font-weight: bold;
margin: 0;
width: 100%;
text-align: center;
}
button:hover, button:focus {
opacity: 0.75;
cursor: pointer;
}
button:active {
opacity: 1;
box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset;
}
</style>
</head>
<body>
<div id="page-wrapper">
<h1>Data List Element Example</h1>
<!-- Static DataList -->
<label for="default">Pick a programming language</label>
<input type="text" id="default" list="languages" placeholder="e.g. JavaScript">
<datalist id="languages">
<option value="HTML">
<option value="CSS">
<option value="JavaScript">
<option value="Java">
<option value="Ruby">
<option value="PHP">
<option value="Go">
<option value="Erlang">
<option value="Python">
<option value="C">
<option value="C#">
<option value="C++">
</datalist>
<!-- AJAX Loaded DataList -->
<label for="ajax">Pick an HTML Element (loaded using AJAX)</label>
<input type="text" id="ajax" list="json-datalist" placeholder="e.g. datalist">
<datalist id="json-datalist"></datalist>
</div>
<script>
// Get the <datalist> and <input> elements
const dataList = document.getElementById('json-datalist');
const input = document.getElementById('ajax');
// Create a new XMLHttpRequest
const request = new XMLHttpRequest();
// Handle the request state changes
request.onreadystatechange = function() {
if (request.readyState === 4) {
if (request.status === 200) {
// Parse the JSON response
const jsonOptions = JSON.parse(request.responseText);
// Loop over the JSON array
jsonOptions.forEach(function(item) {
// Create a new <option> element
const option = document.createElement('option');
option.value = item; // Set value from JSON
dataList.appendChild(option); // Add to datalist
});
// Update placeholder after loading
input.placeholder = "e.g. datalist";
} else {
// Error loading data
input.placeholder = "Couldn't load datalist options :(";
}
}
};
// Initial placeholder
input.placeholder = "Loading options...";
// Open and send the AJAX request
request.open('GET', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/html-elements.json', true);
request.send();
</script>
</body>
</html>
✅ Same functionality: static + AJAX dynamic datalist
✅ Cleaner structure: better spacing, comments, and minor improvements
✅ Fully ready to use
