Show/hide div for search results

Question

I have a results div below my search box which I would like to hide when the search isn't being used. If I remove my padding and border from the div, then it's hidden because it's empty, but ideally I would like to keep the styling. If I hide the div with style="display: none;" then when the results are displayed the div is still hidden, so I'm assuming I need to change the javascript to "unhide" the div? Unfortunately I wouldn't know where to do this in the script.

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

is this what you are looking for

 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

This might not be the cleanest way, but cant you just use use the fadeOut() function when there is no input on the result element and fadeIn() when there is an input val.. That should do what you want, no?

Here is the documentation.

Something like this will hide it by default(since no input) and show it when there is. I hope this helps

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

perhaps you should use visibility: hidden; instead of display: None , and if you want the result placeholder ( .result ) to stay showing, then don't throw the result data into it directly but put it in a second div inside it, that you can display and remove whenever you like based on your criteria, if you could tell us your criteria of showing and hiding the result, I may be able to supply you with code.

Answer 4

I am not exactly sure but this might help

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