如何在输入中的键盘上显示 DIV？答案

【问题标题】：How to display DIV on keyup in Input?如何在输入中的键盘上显示 DIV？
【发布时间】：2017-07-10 13:47:40
【问题描述】：

我有一个全局搜索 input，当用户开始输入时，它应该会显示一个隐藏的 div 以及这些结果。

我无法在按键时显示 div。这是我的fiddle

那是我的 div：

 <div class=" container-fluid parent">
  <input class="form-control" placeholder="Search ..." id="GlobalSearchInput" style="padding:10px;">
  <div class="" id="showSearchDiv" style="display:none;margin-top:10px;height:450px;background-color:red;"></div>
  </div



    $(document).ready(function() {

    $("#GlobalSearchInput").keyup(function() {
      function showGlobalSearch() {
        var x = document.getElementById('showSearchDiv');
        if (x.style.display === 'none') {
          x.style.display = 'block';
        } else {
          x.style.display = 'none';
        }
      }
    });

  });

【问题讨论】：

有什么问题？
您在 keyup 函数 showGlobalSearch 中定义了一个函数，该函数从未被调用...
此外，即使上述问题得到解决，您当前的代码显示第一个字符的 div，隐藏第二个字符，显示第三个字符，隐藏第四个字符......等等......你的预期行为是什么

标签： jquery html onkeyup

【解决方案1】：

这是因为在您的 keyup 事件处理程序中，您定义了一个永远不会调用的 showGlobalSearch。

在这里定义一个函数也没有用处，除非您在代码中的任何地方都需要相同的代码。

所以，这里是更正的代码。

$(document).ready(function() {
  $("#GlobalSearchInput").keyup(function() {
    var x = document.getElementById('showSearchDiv');
    if($(this).val() == "") {
      x.style.display = 'none';
    } else {
      x.style.display = 'block';
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" container-fluid parent">
  <input class="form-control" placeholder="Search ..." id="GlobalSearchInput" style="padding:10px;">
  <div class="" id="showSearchDiv" style="display:none;margin-top:10px;height:450px;background-color:red;"></div>
</div>

【讨论】：

感谢您的提示。但是这个 div 块在闪烁，就像打开和关闭一样。它应该显示，除非输入框为空。
@Cyber 更新了答案。
就是这个。非常感谢。
@Cyber 现在不闪烁了吗？
@Cyber 不客气。您可以通过在div 上调用show 和hide 函数来简化某些部分，并在div 的id 上使用“jQuery”(CSS) 选择器。

【解决方案2】：

两个问题：

您有嵌套函数。删除带有function showGlobalSearch() { 的行（加上对应的}。）
您可以切换每个按键的显示。您可能希望在第一次键入后保持可见，例如通过检查输入长度。

另外，我建议尽可能多地使用 jQuery，不要将它与其他访问 DOM 的方式混合使用（所以不要getElementById）。

结果：

$(document).ready(function() {
  $("#GlobalSearchInput").keyup(function() {
    var div = $('#showSearchDiv');
    if ($("#GlobalSearchInput").val().length > 0) {
      div.show();
    } else {
      div.hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid parent">
  <input class="form-control" placeholder="Search ..." id="GlobalSearchInput" style="padding:10px;">
  <div class="" id="showSearchDiv" style="display:none;margin-top:10px;height:450px;background-color:red;"></div>
</div>

【讨论】：

【解决方案3】：

Working Demo

我有一个全局搜索输入，当用户开始输入它应该显示带有这些结果的隐藏 div

因此，据我所知，您需要在用户输入内容时显示 div 并在没有输入内容时隐藏它。试试下面的方法。

在每次键入时，您都会检查输入值的长度。
如果大于 0 则显示搜索结果框，否则隐藏它。

下面是示例代码

$(document).ready(function() {

 $("#GlobalSearchInput").keyup(function() {
   if ($.trim($(this).val()).length) {
     $('#showSearchDiv').show();
   } else {
     $('#showSearchDiv').hide();
   }
 });
});

【讨论】：

【解决方案4】：

检查此代码，您的代码有问题 1.需要使用关闭标签并且 main 这个不需要使用函数来检查这个因为你已经检查了 onkey 函数

  $(document).ready(function() {
  $("#GlobalSearchInput").keyup(function() {
 var input_value = document.getElementById('showSearchDiv');
 // when value is not empty then div will show and 
 //when input value empty then div will hide
 if($(this).val() == "") {
   input_value.style.display = 'none';
 } else {
    input_value.style.display = 'block';
 }
});
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" container-fluid parent">
    <input class="form-control" placeholder="Search ..." id="GlobalSearchInput" style="padding:10px;">
    <div class="" id="showSearchDiv" style="display:none;margin-top:10px;height:450px;background-color:red;"></div>
</div>

【讨论】：