javascript - 通过在搜索表单中输入div名称/标题来显示隐藏的div？

我要做的是通过在搜索表单中键入一个单词来显示隐藏的div。div包含一个图像。默认情况下，所有div都是隐藏的，因此必须取消隐藏div。。。
示例：div有title=“robot”，其中有一个机器人的图像。我把“机器人”输入搜索表单和脚本（oninput？）使用title=“robot”搜索div并显示div/image。
我对脚本/jquery还不太熟悉，似乎无法理解，非常感谢您的帮助！这是我发现并试图开始工作的代码，但它没有。。。

<div id="div1" class="div">
<img class="robot" id="robot" src="robot.jpg" title="robot" style="display:none"></a>
</div>

<form class="pure-form">
<legend></legend>
<input type="text" placeholder="Example: robot" class="pure-input-rounded"     onkeyup="showDiv(this.value)">
<button type="button" name="answer" class="pure-button">Search</button>
</form>

<script>
function showDiv(value) {
if (value.charAt(value.length - 1) == ' ')
document.getElementById('noresults').style.display = "block";
else
document.getElementById('noresults').style.display = "none";
}
</script>

<div id="noresults" style="display:none" class="results" >No such thing...</div>

最佳答案

jquery解决方案
html格式

<div class="cardContainer hidden robot">
   <img src="robot.jpg" title="robot" alt="" />
</div>

<div class="cardContainer hidden human">
   <img src="human.jpg" title="human" alt="" />
</div>

<form action="" method="post">
   <input type="text" placeholder="Example: robot" class="pure-input-rounded">
</form>

<div id="noResults" class="hidden">no results</div>

css

.hidden
{
  display:none;
}

预计起飞时间

$(".pure-input-rounded").on("keyup", function()
{
  var value = $(this).val();

  if($("." + value).length)
  {
    $(".cardContainer").hide();
    $("." + value).show();
    $("#noResults").hide();
  }
  else
    {
       $("#noResults").show();
       $(".cardContainer").hide();
    }
});

关于javascript - 通过在搜索表单中输入div名称/标题来显示隐藏的div？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22385439/