仅在搜索时显示结果

时间:2017-03-30 19:52:00

标签: javascript jquery ajax getjson

我需要将搜索结果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

1 个答案:

答案 0 :(得分:0)

尝试做类似

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