入力のキーアップでDIVを表示するにはどうすればよいですか？

Question

私はグローバル検索inputを持っており、ユーザーが入力を開始すると、その結果が隠されたdivが表示されます。

キーアップ時に表示するdivを取得できません。ここに私のdivザッツ私fiddle

です：

<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

です。

また、コード内のどこでも同じコードを必要としない限り、関数を定義することはここでは役に立ちません。

ここで修正されたコードです。

$(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を表示し、何も入力されていなければ非表示にする必要があります。以下の方法を試してみてください。

1. すべてのキーアップで、入力値の長さを確認します。
2. 0より大きい場合は検索結果のボックスを表示し、それ以外の場合は非表示にします。以下は

---

あなたkeyupイベントハンドラで使用すると、呼び出されませんshowGlobalSearchを定義するので、これはサンプルコード

$(document).ready(function() { 

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

Answer 3

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