Keep the initially hidden form visible until mouse out from both form and button in jQuery

Question

I have a search icon and search form. The form is initially hidden. On mouse over on the search icon the search form should slide in. And On mouse out from icon it will slide out. And also the form will remain visible until mouse out from the form body. I have written the following - html:

    $("#search,#searchform").mouseenter(function() {
        $("#searchform").slideDown();
    });
    $("#searchform").mouseleave(function() {
        $("#searchform").slideUp();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="rightpartextra" id="search"><i class="fa fa-search" aria-hidden="true"></i><div class="text4">Search</div>
    
    <div class="tools-search-form" id="searchform" style="display: none;">
       <div class=" form-horizontal searchblock" >
          <div class="col-md-9">  
             <input type="text" autocapitalize="off" autocorrect="off" class="form-control searchinput" placeholder="Search Term">
          </div>
          <div class="col-md-3">    
             <button type="submit" class="form-control submitbutton" name="submit" ><i class="fa fa-arrow-right"></i></button>
          </div>
       </div>
    </div>

My site is: http://new.praavahealth.com

Reference of search form: https://www.virtua.org/

Seems to be working. Did you remember to reference JQuery prior to the JavaScript that uses it? — Scott Marcus, Oct 20 '17 at 16:40
Mouseout from search icon doesn't disappear the form and unable to write text on input field. — Muntashir Are Rahi, Oct 20 '17 at 16:43
Then, just add `#search` to your selector for the `mouseleave`, just as you did for `mouseenter`. — Scott Marcus, Oct 20 '17 at 16:47
Added as you suggested but its going wired. And unable to write anything in input field. Please check http://new.praavahealth.com/ — Muntashir Are Rahi, Oct 20 '17 at 16:53
We generally don't go out to your website and debug that. We focus on the code you provide here. Here, there is no issue with typing in the field. — Scott Marcus, Oct 20 '17 at 16:58
"Mouseout from search icon doesn't disappear the form" If it did, how would users interact with the form? — Daniel Beck, Oct 20 '17 at 18:12

score 0 · Answer 1 · answered Oct 20 '17 at 17:00

0

Your mouseleave selector doesn't include the search icon, only the search form, so that's exactly why mouseout isn't working the way that mouseenter is.

As for your inability to type in the field, that's not being shown as an issue with the code you've posted.

$("#search,#searchform").mouseenter(function() {
        $("#searchform").slideDown();
    });
    $("#search, #searchform").mouseleave(function() {
        $("#searchform").slideUp();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="rightpartextra" id="search"><i class="fa fa-search" aria-hidden="true"></i><div class="text4">Search</div>
    
    <div class="tools-search-form" id="searchform" style="display: none;">
       <div class=" form-horizontal searchblock" >
          <div class="col-md-9">  
             <input type="text" autocapitalize="off" autocorrect="off" class="form-control searchinput" placeholder="Search Term">
          </div>
          <div class="col-md-3">    
             <button type="submit" class="form-control submitbutton" name="submit" ><i class="fa fa-arrow-right"></i></button>
          </div>
       </div>
    </div>

answered Oct 20 '17 at 17:00

Scott Marcus

64,069
6
49
71

Still, while trying to type in the input field it disappears. – Muntashir Are Rahi Oct 20 '17 at 17:04
That's not happening in this code unless, of course, you were to move your mouse out of the form area. – Scott Marcus Oct 20 '17 at 17:04
I could not type in the search field. Can u ? – Muntashir Are Rahi Oct 20 '17 at 17:07
@MuntashirAreRahi Yes. It is working exactly as it should. – Scott Marcus Oct 20 '17 at 17:07
@MuntashirAreRahi As I've said a number of times, the issue must be with other code on your page. Please post all the relevant code, here. We don't go out and debug websites. – Scott Marcus Oct 20 '17 at 17:33
I am trying to type in above code snippet and not able to write. form is disappearing. – Muntashir Are Rahi Oct 20 '17 at 17:45
@MuntashirAreRahi What browser and version are you using? – Scott Marcus Oct 20 '17 at 18:28

Nick Timmer · Answer 2 · 2017-10-20T18:53:58.920

  var allChildren;
  var searchField = $('#searchform > div > div.col-md-9 > input')[0];  
  var s = document.getElementById('search');
 var sf = document.getElementById('searchform');
  
allChildren = traverseChildren(s).concat( traverseChildren(sf) );

searchField.addEventListener( 'blur', function(){
  $("#searchform").stop();
  $("#searchform").slideUp();
});

function makeMouseOutFn(elem){
    return function onMouseOut(event) {
        var e = event.toElement || event.relatedTarget;
        if (!!~allChildren.indexOf(e)) {
            return;
        }
        if( searchField == document.activeElement ){ 
            return; 
        }
        $("#searchform").stop();
     $("#searchform").slideUp();
        // handle mouse event here!
};
}

//using closure to cache all child elements     

 s.addEventListener('mouseout',makeMouseOutFn(parent),true);
 sf.addEventListener('mouseout',makeMouseOutFn(parent),true);
  
 $(s,sf).mouseenter(function() {
        $("#searchform").stop();
        $("#searchform").slideDown();
    });
                                                           
//quick and dirty BFS children traversal, Im sure you could find a better one                                        
function traverseChildren(elem){
    var children = [];
    var q = [];
    q.push(elem);
    while (q.length>0)
    {
        var elem = q.pop();
        children.push(elem);
        pushAll(elem.children);
    }
        function pushAll(elemArray){
            for(var i=0;i<elemArray.length;i++)
            {
                q.push(elemArray[i]);
            }
            
        }
        return children;
}

#searchform
{
    background-color:cyan;
}

#search{
  background-color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="rightpartextra" id="search"><i class="fa fa-search" aria-hidden="true"></i><div class="text4">Search</div>
    
    <div class="tools-search-form" id="searchform" style="display: none;">
       <div class=" form-horizontal searchblock" >
          <div class="col-md-9">  
             <input type="text" autocapitalize="off" autocorrect="off" class="form-control searchinput" placeholder="Search Term">
          </div>
          <div class="col-md-3">    
             <button type="submit" class="form-control submitbutton" name="submit" ><i class="fa fa-arrow-right"></i></button>
          </div>
       </div>
    </div>

I understand the issue you're having. My solution is based on another stackoverflow question/answer: Prevent onmouseout when hovering child element of the parent absolute div WITHOUT jQuery

Edit: added $("#searchform").stop(); So that the search box doesn't start opening and closing repeatedly

okay, how does it fail in chrome? and if they start typing but their mouse leaves the search, would you want the search to stay open? — Nick Timmer, Oct 20 '17 at 18:07
In chrome while i click on input field the whole form disappears like the mouseleave event. I want to keep the form open untill mouseleave from the form and search navigation. — Muntashir Are Rahi, Oct 20 '17 at 18:13
sorry man, i not able to help more. I like the idea of a on hover search, but I think most places do an on click search bar like this: https://jsfiddle.net/solodev/cdzow8z8/ — Nick Timmer, Oct 20 '17 at 18:16
I added the animation stop() so it doesn't get in a cycle of opening/closing. But it probably doesn't fix the issue you were noticing on chrome. I tested chrome and it working for me but i try testing more. — Nick Timmer, Oct 20 '17 at 18:27
@MuntashirAreRahi Again, this has got to be unique to your environment. I'm using Chrome 61 and it is working correctly. Tell us what your environment is. — Scott Marcus, Oct 20 '17 at 18:31
I tried in both chrome 62 and Mozilla Firefox 56 on windows 10 — Muntashir Are Rahi, Oct 20 '17 at 18:42
Thanks @ScottMarcus for organizing the code snippet so it's not just a jsfiddle link. — Nick Timmer, Oct 20 '17 at 18:54
I edited it again so that if the user has the input box active then it won't close until loses focus (blur). Is that worse or better than before? — Nick Timmer, Oct 20 '17 at 18:55

Keep the initially hidden form visible until mouse out from both form and button in jQuery

2 Answers2