仅在搜索时显示结果

Question

我需要搜索结果 div 仅在返回搜索结果时显示（而不是在用户搜索术语时），然后能够在搜索新术语时清除结果 div。

我应该可以使用 $(".results").empty() 之类的东西，但这会使结果 div 始终为空白。

$("#searchterm").keyup(function(e) {
  var q = $("#searchterm").val();
  //Only begin search with at least 3 characters.
  if (q.length > 3) {
    ajax_search();
  }
  //Send search query
  function ajax_search() {
    $.getJSON("//url-to-search?q=" + q, {},
      //Get results and make 'em look good
      function(data) {
        console.log(data);
        //  $(".results").append("Results for <b> " + q + "</b>");
        $.each(data.data, function(i, data) {
          if (data.type === "category-1") {
            if ($(".category-1").text() == '') {
              $(".category-1-results-header, .category-1").hide()
            }
            $(".category-1").append("<li class='result-item'><a href=\"localhost:4000" + data.permalink + "\">" + data.title + "</a></li>");
          } else if (data.type === "category-2") {
            $(".category-2").append("<li class='result-item'><a href=\"localhost:4000" + data.permalink + "\">" + data.title + "</a></li>");
            if ($(".category-2").text() == '') {
              $(".category-2-results-header, .category-2").hide()
            }
          } else if (data.type === "category-3") {
            $(".category-3").append("<li class='result-item'><a href=\"localhost:4000" + data.permalink + "\">" + data.title + "</a></li>");
            if ($(".category-3").text() == '') {
              $(".category-3-results-header, .category-3").hide()
            }
          }
        });
      });
  }
});

JSFIDDLE：LINK

Answer 1

尝试做类似的事情

if (q.length > 3) {
    ajax_search();
} else {
    $(".results").empty();
}