Untitled

<!doctype html>
<meta charset="UTF-8">
<title>気になるサジェスチョン</title>
<form action="/" autocomplete="off" enctype="application/x-www-form-urlencoded" method="POST">
  <fieldset>
    <legend><label for="anime-title-field">すきなあにめのなまえ</label></legend>
    <select id="anime-title-field">
      <option selected value="symphogear">戦姫絶唱シンフォギア
      <option value="mashiro">ましろ色シンフォニー
      <option value="hidamari">ひだまりスケッチ
      <option value="yuruyuri">ゆるゆり
      <option value="madoka-magica">魔法少女 まどか☆マギカ
      <option value="c">C
      <option value="blood-c">BLOOD-C
    </select>
  </fieldset>
  <fieldset>
    <legend><label for="character-name-field">すきなおんなのこのなまえ</label></legend>
    <input id="character-name-field" list="character-list" name="name" type="search" value="">
    <datalist id="character-list"></datalist>
  </fieldset>
</form>
<script>
window.addEventListener('DOMContentLoaded', function() {
  var _cache = {};
  document.getElementById('character-name-field').addEventListener('focus', function() {
    var animeTitle = document.getElementById('anime-title-field').value;
    this.list.parentNode.replaceChild(_cache[animeTitle] || (function(client, uri, res) {
      client.open('GET', uri, false);
      client.send();
      return (res = client.responseXML) ? _cache[animeTitle] = res.getElementById('character-list') : null;
    })(new XMLHttpRequest(), '/datalist/' + animeTitle) || this.list, this.list);
  });
});
</script>