Hide and open div under certain conditions

Question

I’m having trouble opening and closing a particular search bar.

I need to open a div while Focus is in the field and take while you don’t have it, but when you click on div open source cannot be removed from the field or closed.

I tried to put the event on body, in a div but it didn’t work it keeps closing.

This is the code I’ve been using:

$("input[name='search-input']").blur( function() {
     $(".divCompleteSearch").addClass('hiddendiv');
});

$("input[name='search-input']").focus( function() {
    $(".divCompleteSearch").removeClass('hiddendiv');
});

$(".button-search").on('click', function (e) {
    e.preventDefault();
    $("input[name='search-input']").focus();
    $(".active").removeClass("active");
    $(this).addClass('active');
});

HTML:

    <div class="row align-content-center">
    <div class="col search-bar">
        <div class="col m1 icon-search-bar">
            <svg viewBox="0 0 16 16" role="presentation" aria-hidden="true" focusable="false"
                 style="height: 22px; width: 22px; display: block; fill: currentcolor;">
                <path
                    d="m2.5 7c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5m13.1 6.9-2.8-2.9c.7-1.1 1.2-2.5 1.2-4 0-3.9-3.1-7-7-7s-7 3.1-7 7 3.1 7 7 7c1.5 0 2.9-.5 4-1.2l2.9 2.8c.2.3.5.4.9.4.3 0 .6-.1.8-.4.5-.5.5-1.2 0-1.7"></path>
            </svg>
        </div>
        <div class="col m11 input-search-bar">
            <input type="text" name="search-input" placeholder="Experimente Colegio São Fransisco">
        </div>
    </div>
</div>
<div class="row align-content-center divCompleteSearch hiddendiv">
    <div class="col complete-search">
        <div class="row">
            <div class="col m3 button-search active">
                Escolas
            </div>
            <div class="col m3 button-search">
                Bairro
            </div>
            <div class="col m3 button-search">
                Telefone
            </div>
            <div class="col m3 button-search">
                Apelido
            </div>
        </div>
    </div>
</div>

In this first image is the div closed, when there is the input search it should open the second image, the div should stay open until it clicks anywhere other than inside the div open.

Answer 1

You can use the event mouseenter within the div to check while the mouse is in the div and thus add a class for control, for example divativa, at the event mouseleave i.e., when the mouse is no longer focused on the div, it will remove the control class.

In your event of blur, I just checked if the div is or is not with the control class, if it is not, it can add the class to hide it.

$('.divCompleteSearch').on('mouseenter', function() {
  $(this).addClass('divativa');
})

$('.divCompleteSearch').on('mouseleave', function() {
  $(this).removeClass('divativa');
})

$("input[name='search-input']").blur( function() {     
     if(!$('.divCompleteSearch').hasClass('divativa')) {
        $(".divCompleteSearch").addClass('hiddendiv');
     }     
});


$("input[name='search-input']").focus( function() {
    $(".divCompleteSearch").removeClass('hiddendiv');
});

$(".button-search").on('click', function (e) {
    e.preventDefault();
    $("input[name='search-input']").focus();
    $(".active").removeClass("active");
    $(this).addClass('active');
});

.hiddendiv {
  display: none;
}
.divCompleteSearch {
  border: 1px solid green;
}
.outradiv {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row align-content-center">
    <div class="col search-bar">
        <div class="col m1 icon-search-bar">
            <svg viewBox="0 0 16 16" role="presentation" aria-hidden="true" focusable="false"
                 style="height: 22px; width: 22px; display: block; fill: currentcolor;">
                <path
                    d="m2.5 7c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5m13.1 6.9-2.8-2.9c.7-1.1 1.2-2.5 1.2-4 0-3.9-3.1-7-7-7s-7 3.1-7 7 3.1 7 7 7c1.5 0 2.9-.5 4-1.2l2.9 2.8c.2.3.5.4.9.4.3 0 .6-.1.8-.4.5-.5.5-1.2 0-1.7"></path>
            </svg>
        </div>
        <div class="col m11 input-search-bar">
            <input type="text" name="search-input" placeholder="Experimente Colegio São Fransisco">
        </div>
    </div>
</div>
<div class="row align-content-center divCompleteSearch hiddendiv">
    <div class="col complete-search">
        <div class="row">
            <div class="col m3 button-search active">
                Escolas
            </div>
            <div class="col m3 button-search">
                Bairro
            </div>
            <div class="col m3 button-search">
                Telefone
            </div>
            <div class="col m3 button-search">
                Apelido
            </div>
        </div>
    </div>
</div> <br><br>
<div class="outradiv">
  OUTRA DIV, clique para fechar a de cima
</div>

I inserted a border into the divs to make it easier to view and test.