Data list HTML element and loaded using Ajax

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