Question

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

我无法在keyup时显示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';
        }
      }
    });

  });

Answer 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>

Answer 2

<强> Working Demo

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

因此，根据我的理解，您需要在用户输入内容时显示div，并在输入任何内容时隐藏它。尝试以下方法。

在每个键盘上，您将检查输入值的长度。
如果大于0，则显示搜索结果框，否则将其隐藏。

以下是示例代码

$(document).ready(function() {

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

Answer 3

两个问题：

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

另外，我建议尽可能多地使用jQuery，而不是将其与其他方法混合以访问DOM（所以没有getElementById）。

结果：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

检查此代码，您的代码有问题 1.需要使用密切标签并且主要这不需要使用功能来检查这个因为你已经检查了关键功能

  $(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>

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

4 个答案: