Как отобразить DIV на клавиатуре в Input?

Question

У меня глобальный поиск input и когда пользователь начинает печатать, он должен отображать скрытый div с этими результатами.

Я не могу получить DIV для отображения, когда Keyup. Вот моя скрипка

Вот мой див

 <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

Две проблемы:

• У вас есть вложенные функции. Удалить строку с 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 3

Проверьте этот код, и у вашего кода есть некоторая проблема: 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>

Answer 4

Рабочая Демо

У меня есть глобальный поисковый ввод, и когда пользователь начинает печатать, он должен отображать скрытый div с этими результатами

Итак, насколько я понимаю, вам нужно отображать div, когда пользователь что-то печатает, и скрывать, когда ничего не печатается. Попробуйте следующий подход.

1. На каждом ключе вы будете проверять длину входного значения.
2. Если его больше 0, тогда покажите окно результатов поиска, иначе скрывайте его.

---

Ниже приведен пример кода

$(document).ready(function() {

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