Autofill choice(s) disappear or re-appear for no apparent reason
<p>I am working on an "autofill" field for a Rails app I've been playing around with for quite some time.  I want to stick to jQuery for this, and for the most part it works pretty well.  However, options will randomly disappear for no clear reason.  I make one Ajax request to the API I'm using (and I'd like to keep it that way) and then remove items that do not match as more characters are typed.  When I search for "Food Chain,"  I type in "food c" and nothing is showing, however... I add the next letter, and the card "Food Chain" appears again.  Here is my codepen if you want to have a look: <a href="http://codepen.io/IAMZERG/pen/WxRaBd" rel="nofollow">http://codepen.io/IAMZERG/pen/WxRaBd</a></p>

<p>HTML: </p>

<pre><code>&lt;div class="border"&gt;
  &lt;input id="cardsearch" type="text" placeholder="MTG Card Search"&gt;&lt;/input&gt;
&lt;/div&gt;
&lt;div id="results"&gt;&lt;/div&gt;
</code></pre>

<p>JS (a little code smell... my apologies):</p>

<pre><code>$("#cardsearch").keyup(function (event) {
  //event.preventDefault();
  //$("#results").hide();
  //console.log("button pressed!");
  let inputValue = $(this).val();
  //added if statement. One ajax request to server.  Will filter results
  //if we have already made one.
  //console.log($("#results").html().length);
  if ($("#results").html().length &lt; 1) {
    $.ajax({
    url: "https://api.magicthegathering.io/v1/cards?",
    dataType: 'json',
    type: "GET",
    data: {
      name: inputValue
    }
  }).done(function (data) {

    data.cards.forEach(function(item) {
      //console.log(item);
      let container = $("#results");
      let result = $("&lt;div class='result'&gt;&lt;h2&gt;&lt;/h2&gt;&lt;/div&gt;").appendTo(container);
      //console.log(result);
      $("h2:empty").append(item.name)
        .attr("target", "_blank");
      result.append(item.text);
    });

    $(".result").click(function(item) {
      //console.log($(this).find("h2").text());
      $("#cardsearch").val($(this).find("h2").text());
      $("#results").fadeOut();
    });
    //$("#results").append("h1").append(item.title).append(item.snippet);
    //});
    //$("#results").html(data.query.search[5].snippet);
    });
  } else {  //if there are already results, we will filter the results.
    $(".result").each(function (index) {
      console.log($(this).find("h2").text());
      console.log($("#cardsearch").val());
      console.log($(this).find("h2").text().indexOf($("#cardsearch").text()));
      let search = $("#cardsearch").text();
      $(".result").remove(":contains('" + search + "')");
      /*
      if ( $(this).find("h2").text().indexOf($("#cardsearch").val()) === -1) {
        $(this).remove();
      }
      */
    });
    $("#results").show();
  }
});
</code></pre>

<p>CSS (this is subject to change, and probably will):</p>

<pre><code>@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro|Alef);

input {
  margin: auto;
  padding: auto;
  display: block;
  font-family: Alef, sans-serif;
  font-size: 2em;
  padding-left: 20px;

  border-radius: 10px;
  height: 50px;
}
body {
     overflow-y: -moz-scrollbars-vertical;
     overflow-y: scroll;
}

#results {
  color: white;
}

a {
  color: #99bb99;
  display: block;
  font-family: Alef, sans-serif;
  font-size: 1.5em;
}
a:hover {
  color: #999999;
  transition: 0.2s;
}

body {
  background: black;
}

#results {
  width: 70%;
  margin: auto;
  padding: auto;
  padding-top: 20px;
  font-family: Source Sans Pro, sans-serif;
  font-size: 1em;
}
.result {
  padding: 20px;
  background: #555;
  border: 2px solid #333;
  margin: 5px;
  border-radius: 5px;
}
</code></pre>