使用 JQuery 从搜索文本框中删除整个文本后，如何从搜索列表中删除项目

Question

我已经使用 Jquery 和 JSON 实现了实时搜索。最初没有结果显示，因为搜索框中没有文本。当我在搜索文本框中写一些文本时，它会显示结果。但是，即使我从搜索文本框中删除了文本，也会显示结果。

从文本框中删除所有内容后，如何删除结果？

以下是jquery代码：

$('#search').keyup(function(){
  var searchField= $('#search').val();
  console.log(searchField);
  var myExp = new RegExp(searchField, "i" );
  $.getJSON('js/data.json', function(data){
    var output = '<ul class="seachresults">';
    $.each(data, function(key,val){
      if((val.name.search(myExp)!= -1) || (val.company.search(myExp)!= -1)){
      output += '<li>';
      output += '<h2>'+ val.name +'</h2>';
      output += '<img src="images/'+val.shortname+'_tn.png" alt="'+val.name+ '" />'  ;
      output += '<p>'+ val.description +'</p>';
      output += '<h2>'+ val.company +'</h2>';
      output += '<h2>'+ val.price +'</h2>';
      output += '</li>';
    }
    });
    output+= '</ul>';
    $('#update').html(output);
  });

});

以下是 HTML 代码：

<div id='searcharea'>
  <label for="search">Product Directory</label>
  <p>Search</p>
  <input type="search" name="search" id="search" placeholder="info" />
</div>
<div id='update'></div>

Answer 1

您检查是否使用if ($.trim(searchField) != '') { 输入了一些值。如果有一些值，则现有代码将起作用，否则它将清除结果容器。所以你在if 条件之外初始化var output = '';。

以下更新代码：

$('#search').keyup(function() {
  var searchField = $(this).val();
  console.log(searchField);
  var myExp = new RegExp(searchField, "i");
  var output = '';
  if ($.trim(searchField) != '') {
    $.getJSON('js/data.json', function(data) {
      output = '<ul class="seachresults">';
      $.each(data, function(key, val) {
        if ((val.name.search(myExp) != -1) || (val.company.search(myExp) != -1)) {
          output += '<li>';
          output += '<h2>' + val.name + '</h2>';
          output += '<img src="images/' + val.shortname + '_tn.png" alt="' + val.name + '" />';
          output += '<p>' + val.description + '</p>';
          output += '<h2>' + val.company + '</h2>';
          output += '<h2>' + val.price + '</h2>';
          output += '</li>';
        }
      });
      output += '</ul>';
    });
      $('#update').html(output);
  } else {
      $('#update').html(output);
  }
});