如何隐藏元素并仅在用户开始输入时显示它？

Question

我正在尝试将搜索功能合并到我的 Jekyll 站点中。因此，我决定使用 Simple-Jekyll-Search，可以在这里找到：Link.

这是我的 search.html 的样子：

<input type="text" id="my-search-input" placeholder="Search">

<div class="card">  
  <ul id="my-results-container"></ul>
</div>

<script src="/assets/javascript/simple-jekyll-search.min.js" type="text/javascript"></script>

<script>
SimpleJekyllSearch({
  searchInput: document.getElementById('my-search-input'),
  resultsContainer: document.getElementById('my-results-container'),
  searchResultTemplate: '[...]',
  json: '/search.json',
  noResultsText: '<li><p>No results found!</p></li>'
})
</script>

到目前为止，搜索功能运行良好。然而，即使没有输入任何内容，带边框的卡片也会显示出来。所以问题是：

如何隐藏卡片，只在用户输入一些按键后才显示？

Answer 1

首先在您的样式表中隐藏卡片 class。

.card{

display:none;
}

然后在脚本标签中添加以下代码 -

$(function() {
     $('#my-search-input').keyup(function() {
 if ($(this).val().length == 0) {

    $('.card').hide();
  } else {
    $('.card').show();
  }
}).keyup();
});

我假设您已经在代码中添加了 jquery - 如果没有，请在 head 标签中添加以下代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

这就是我的做法（非jquery方式）：

function show(){
//Get the div we want gone/appeared
box=document.getElementById("box");
//Get the input
input=document.getElementById("input");

//Check if the user enterred something
if(!input.value==""){
  //If its the case set the box to visible
  box.style.display="block";
}else{
  //Else we want it gone
  box.style.display="none";
}
}

/*SO related*/
body{background:#121212;color:white;font-family:Helvetica, sans-serif;}

/*SO related*/
#input{
background:#222222;
color:white;
padding:5px;
border:1px solid white;
}

/*Important*/
#box{
display:none;
/*SO related*/
border:1px solid white;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Enter something silly:</p>
<input type="text" id="input" onkeyup="show();">
<div id="box">wow look i popped out</div>
</body>
</html>

如何隐藏元素并仅在用户开始输入时显示它？

How to hide an element and only show it when a user starts typing?

html

css

jekyll

bootstrap-4