显示/隐藏搜索结果的 div

Question

我的搜索框下方有一个结果 div，我想在不使用搜索时隐藏它。 如果我从 div 中删除我的填充和边框，那么它会被隐藏，因为它是空的，但理想情况下我想保留样式。 如果我用style="display: none;"隐藏 div 那么当显示结果时，div 仍然隐藏，所以我假设我需要将 javascript 更改为“取消隐藏”div？ 不幸的是，我不知道在脚本中的何处执行此操作。

HTML:
<div class="col div-parent">
    <input type="text" class="form-control-sm border border-secondary" name="search-box" id="search-box" autocomplete="off"
            placeholder="Search ...">
    <div class="result div-child bg-gray-200 pt-3 px-3 text-sm border border-secondary rounded-3"></div>
</div>

Javascript:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#search-box').on("keyup input", function(){
                /* Get input value on change */
                var inputVal = $(this).val();
                var resultDropdown = $(this).siblings(".result");
                if(inputVal.length) {
                    $.get("ajax-live-search.php?rID=<?php echo $region; ?>&oID=2", {term: inputVal}).done(function(data){
                        // Display the returned data in browser
                        resultDropdown.html(data);
                    });
                } else {
                    resultDropdown.empty();
                }
            });
            // Set search input value on click of result item
            $(document).on("click", ".result p", function(){
                $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
                $(this).parent(".result").empty();
            });
        });
 </script>

Answer 1

这是你想要的

 var underSearchbar = document.getElementById("underSearchbar"); /*hide at the beginning*/ underSearchbar.style.display = "none"; $(document).ready(function () { $('#search-box').on("keyup input", function () { /* show div on input */ underSearchbar.style.display = "block"; /* Get input value on change */ var inputVal = $(this).val(); var resultDropdown = $(this).siblings(".result"); if (inputVal.length) { $.get("ajax-live-search.php?rID=<?php echo $region; ?>&oID=2", { term: inputVal }).done(function (data) { // Display the returned data in browser resultDropdown.html(data); }); } else { resultDropdown.empty(); /* hide again if empty */ underSearchbar.style.display = "none"; } }); // Set search input value on click of result item $(document).on("click", ".result p", function () { $(this).parents(".search-box").find('input[type="text"]').val($(this).text()); $(this).parent(".result").empty(); }); });

 <div class="col div-parent"> <input type="text" class="form-control-sm border border-secondary" name="search-box" id="search-box" autocomplete="off" placeholder="Search..."> <div class="result div-child bg-gray-200 pt-3 px-3 text-sm border border-secondary rounded-3" id="underSearchbar"></div> </div>

Answer 2

这可能不是最干净的方法，但是当结果元素上没有输入时，您不能只使用fadeOut() function，而当有输入值时，您不能使用fadeIn()。那应该做你想做的，不是吗？

这是文档。

默认情况下，这样的东西会隐藏它（因为没有输入）并在有时显示它。 我希望这有帮助

if(inputVal.length) {
                $.get("ajax-live-search.php?rID=<?php echo $region; ?>&oID=2", {term: inputVal}).done(function(data){
                    // Display the returned data in browser
                    resultDropdown.html(data);
                    $("#yourelement").fadeIn();
                });
            } else {
                resultDropdown.empty();
                $("#yourelement").fadeOut();
            }

Answer 3

也许你应该使用visibility: hidden; 而不是display: None ，如果您希望结果占位符（ .result ）保持显示，那么不要将结果数据直接放入其中，而是将其放入其中的第二个 div 中，您可以随时显示和删除就像根据您的标准一样，如果您能告诉我们您显示和隐藏结果的标准，我也许可以为您提供代码。

Answer 4

我不太确定，但这可能会有所帮助

<div class="col div-parent">
    <input type="text" class="form-control-sm border border-secondary" name="search-box" id="search-box" autocomplete="off"
            placeholder="Search ...">
    <div class="result div-child bg-gray-200 pt-3 px-3 text-sm border border-secondary rounded-3"></div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#search-box').on("keyup input", function(){
                /* Get input value on change */
                var inputVal = $(this).val();
                var resultDropdown = $(this).siblings(".result");
                if(inputVal.length) {
                    $.get("ajax-live-search.php?rID=<?php echo $region; ?>&oID=2", {term: inputVal}).done(function(data){
                        // Display the returned data in browser
                        resultDropdown.html(data);
                    });
                } else {
                    resultDropdown.empty();
                }
                $('.result').css("display","block")
                    })
                $('#search-box').focusout( function() {
                $('.result').css("display","none")
                            });
            // Set search input value on click of result item
            $(document).on("click", ".result p", function(){
                $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
                $(this).parent(".result").empty();
            });
        });
 </script>

Styles

<style>
    .result {
        display:none;
    }
</style>