如何在 Input 的 keyup 上显示 DIV？

Question

我有一个全局搜索 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';
        }
      }
    });

  });

Answer 1

Working Demo

I have an global search input and when the user start typing it should display a hidden div with those results

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

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

下面是示例代码

$(document).ready(function() {

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

Answer 2

这是因为在您的 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 3

两个问题：

您有嵌套函数。删除带有 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>

Answer 4

检查这段代码，你的代码有问题 1.需要使用关闭标签主要这个不需要使用函数来检查这个因为你已经检查了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>

如何在 Input 的 keyup 上显示 DIV？

How to display DIV on keyup in Input?

html

jquery

onkeyup