javascript - 自动填充选项消失或无明显原因重新出现

Question

我正在为一个 Rails 应用程序开发一个“自动填充”字段，我已经使用了相当长一段时间了。为此我想坚持使用 jQuery，而且在大多数情况下它都运行得很好。然而，选项会无缘无故地随机消失。我向我正在使用的 API 发出一个 Ajax 请求(我希望保持这种方式)，然后随着输入更多字符而删除不匹配的项目。当我搜索“食物链”时，我输入“食物 c”，但没有显示任何内容，但是...我添加下一个字母，“食物链”卡片再次出现。如果你想看看，这是我的代码笔:http://codepen.io/IAMZERG/pen/WxRaBd

HTML:

<div class="border">
  <input id="cardsearch" type="text" placeholder="MTG Card Search"></input>
</div>
<div id="results"></div>

JS(有点代码味道......我很抱歉):

$("#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 < 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 = $("<div class='result'><h2></h2></div>").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();
  }
});

CSS(这可能会发生变化，而且很可能会发生变化):

@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;
}

Answer 1

您不必总是注册事件触发器，这是一个坏习惯。

$("#cardsearch").keyup(function (event) {  
  let inputValue = $(this).val();
  if(inputValue.trim()==""){$('#results').empty();return false}
    $.ajax({
    url: "https://api.magicthegathering.io/v1/cards?",
    dataType: 'json',
    type: "GET",
    data: {
      name: inputValue
    }
  }).done(function (data) {
    let container = $("#results");
    container.empty();
    data.cards.forEach(function(item) {
      //simple ? 
      let result = $("<div class='result'><h2></h2></div>");
      result.children('h2').first().append(item.name);
      result.append(item.text);
      result.attr("targer","_blank");
      container.append(result);
       });
    });


});
//register one event for result click
$("#results").on('click','.result',function(){
      //console.log($(this).find("h2").text());
      $("#cardsearch").val($(this).find("h2").text());
});

这里是增强功能，它每 2 秒调用一次:)

var allowed=true;
var timeoutHandler = null;
$("#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(inputValue.trim()==""){$('#results').empty();return false;}
 if(!allowed){clearTimeout(timeoutHandler);timeoutHandler=setTimeout(function(){$('#cardsearch').keyup()},1000);return false};
  $.ajax({
    url: "https://api.magicthegathering.io/v1/cards?",
    dataType: 'json',
    type: "GET",
    data: {
      name: inputValue
    }
  }).done(function (data) {
    allowed = false;
    let container = $("#results");
    container.empty();
    setTimeout(function(){allowed=true;},1800);
    data.cards.forEach(function(item) {
      //console.log(item);
      let result = $("<div class='result'><h2></h2></div>");
      result.children('h2').first().append(item.name);
      result.append(item.text);
      result.attr("targer","_blank");
      container.append(result);
       });
    });
    $("#results").on('click','.result',function(){
      //console.log($(this).find("h2").text());
      $("#cardsearch").val($(this).find("h2").text());
    });

});