Question 36525 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Show/hide div for search results – Jquery

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

4

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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();
            }
    Login or Signup to reply.
  4. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search