javascript - 输入为空时隐藏结果答案

【问题标题】：javascript - hide results when input is emptyjavascript - 输入为空时隐藏结果
【发布时间】：2020-12-31 01:09:18
【问题描述】：

我有使用 Ajax jQuery 的实时搜索 JSON 数据，我想调用多个 JSON 文件进行搜索。

在页面的开头，输入为空，结果不显示。但是，如果您在输入中再次写入和删除文本，则会显示所有结果。

当输入再次为空时，我想再次隐藏所有结果。

提前谢谢你。

HTML 输入：

<div class="container" style="width:900px;">
   <div align="center">
    <input type="text" name="search" id="search" placeholder="Search Employee Details" class="form-control" />
   </div>
   <ul class="list-group" id="result"></ul>
  </div>

JavaScript：

<script>
$(document).ready(function(){
 $.ajaxSetup({ cache: false });
 $('#search').keyup(function(){
  $('#result').html('');
  $('#state').val('');
  var searchField = $('#search').val();
  var expression = new RegExp(searchField, "i");
  $.getJSON('1.json', function(data) {
   $.each(data.entries, function(key, value){
    if (value.title.search(expression) != -1 || value.author.search(expression) != -1)
    {
     $('#result').append('<li class="list-group-item link-class">'+value.title+'  <span class="text-muted">'+value.author+'</span></li>');
    }
   });   
  });
 });
 
 $('#result').on('click', 'li', function() {
  var click_text = $(this).text().split('|');
  $('#search').val($.trim(click_text[0]));
  $("#result").html('');
 });
});
</script>

【问题讨论】：

为什么不添加一个 if 条件来检查更改时输入的长度是否 > 1。？然后执行您的请求并显示 div else ...删除 div
你能告诉我怎么做吗？谢谢@Zaidabukhalaf
$('#search').keypress(function() { if($(this).val().length > 1) { // 继续工作 } else { $('#result ').html('') }
在 jquery 中使用 .html("") 方法清除附加的数据好吗？ @佩德罗
再次感谢！是的，我会尝试我会在这里申请，我还是 javascript @Zaidabukhalaf 的新手

标签： javascript html jquery json ajax

【解决方案1】：

$('#search').keypress(function() { 
if($(this).val().length > 1) { 
// Continue work 
} else { 
$('#result').html('') 
}

【讨论】：

【解决方案2】：

使用keypress 和keydown 检查文本更改前的长度。您可以使用keyup 和change。

最好和keyup一起使用：

$('#txt1').keyup(function() {
    if (!$(this).val().length) $('#result').html('');
});

你也可以使用change:

$('#txt1').change(function() { 
    if (!$(this).val().length) $('#result').html('');
});

当您单击页面上的其他位置时，将执行更改。

【讨论】：