Question

我正在制作＆＃34;自动填充＆＃34; Rails应用程序的领域我已经玩了很长时间了。我想坚持使用jQuery，并且在大多数情况下它的效果非常好。但是，选项会随机消失，没有明确的理由。我向我使用的API发出了一个Ajax请求（并且我希望保持这种方式），然后删除因输入更多字符而不匹配的项目。当我搜索＆＃34;食物链时，＆＃34;我输入＆＃34;食物c＆＃34;然而，没有任何东西显示出来......我添加了下一封信，以及卡片＆＃34; Food Chain＆＃34;再次出现。如果你想看一下，我的代码是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());
    });

});

自动填充选项会在没有明显原因的情况下消失或重新出现

1 个答案: