Show/hide div for search results-CodePudding

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 >
    <input type="text"  name="search-box" id="search-box" autocomplete="off"
            placeholder="Search ...">
    <div ></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>

CodePudding user response：

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 >
    <input type="text"  name="search-box" id="search-box"
      autocomplete="off" placeholder="Search ...">
    <div  id="underSearchbar"></div>
  </div>

CodePudding user response：

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();
            }

CodePudding user response：

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.

CodePudding user response：

I am not exactly sure but this might help

<div >
    <input type="text"  name="search-box" id="search-box" autocomplete="off"
            placeholder="Search ...">
    <div ></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>