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) != '') {检查是否输入了某个值。如果有值，则现有代码将起作用，否则将清除结果容器。因此，您要在var output = '';条件之外初始化if。

以下更新的代码：

$('#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);
  }
});

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

1 个答案: