Data list HTML element and loaded using Ajax
Step1: index.html
Now in this step, you need to add two routes to your index.html file the same as below.
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</title>
</head>
<body>
<style>
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
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: #FFFFFF;
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: #999999;
}
input {
width: 100%;
padding: 0.5em 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.8em;
background: #69c773;
border-bottom: 1px solid #498b50;
color: white;
-webkit-font-smoothing: antialiased;
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>
<div id="page-wrapper">
<h1>Datalist Element Show</h1>
<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>
<label for="ajax">Pick an HTML Element (options 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.
var dataList = document.getElementById('json-datalist');
var input = document.getElementById('ajax');
// Create a new XMLHttpRequest.
var request = new XMLHttpRequest();
// Handle state changes for the request.
request.onreadystatechange = function(response)
{
if (request.readyState === 4)
{
if (request.status === 200)
{
// Parse the JSON
var jsonOptions = JSON.parse(request.responseText);
// Loop over the JSON array.
jsonOptions.forEach(function(item) {
// Create a new <option> element.
var option = document.createElement('option');
// Set the value using the item in the JSON array.
option.value = item;
// Add the <option> element to the <datalist>.
dataList.appendChild(option);
});
// Update the placeholder text.
input.placeholder = "e.g. datalist";
}
else
{
// An error occured :(
input.placeholder = "Couldn't load datalist options :(";
}
}
};
// Update the placeholder text.
input.placeholder = "Loading options...";
// Set up and make the request.
request.open('GET', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/html-elements.json', true);
request.send();
</script>
</body>
</html>
0 Comments
CAN FEEDBACK
Emoji