title: Populate datalist options by iterating through JSON file
body: <p>I'm trying to create a search box that will essentially autocomplete based on user input from a key-value pair in a json file. It looked like using datalist might be the best option for this, but when I execute the code below, no option tags appear in the html. </p>
  
  <p>I am still pretty new to jquery and json, so I'm WAY open to suggestions.</p>
  
  <p>Here's the json. The list contains 1450 items if that's relevant:</p>
  
  <pre><code>{ "osCars": [
  {   "id": 1,
      "name": "Cadillac",
      "type": "Sedan",
      "desc": "A fine American automobile"
  },
  {   "id": 2,
      "name": "BWM",
      "type": "Sedan",
      "desc": "A fine German automobile"
  },
  {   "id": 3,
      "name": "Lexus",
      "type": "Sedan",
      "desc": "A fine Japanese automobile"
  }
  ]}
  </code></pre>
  
  <p>Here's the html:</p>
  
  <pre><code>&lt;input type="text" maxlength="30" list="carList" id="carSearchBox" name="carSearchBox" pattern="[A-Za-z '-]*$" placeholder="search cars" autofocus autocomplete="on"&gt;
  &lt;datalist id="carList"&gt;&lt;/datalist&gt;
  &lt;script src="js/main.js"&gt;&lt;/script&gt;
  &lt;script&gt;window.onload=getCars;&lt;/script&gt;
  </code></pre>
  
  <p>And here's the javascript/jquery:</p>
  
  <pre><code>function getCars() {
      var url, carOption;
      url = 'js/cars.json';
  
      $.getJSON(url, function(data) {
      //populate the cars datalist
          $(data.osCars).each(function() {
              carsOption = "&lt;option value=\"" + this.id + "\"&gt;" + this.name + "&lt;/option&gt;";
              $('#carList').append(carsOption);
          });
      });
  }
  </code></pre>