Question

I have a search box which, in it’s first start is a magnifying glass icon. When clicked (:focus) it expands into a search box where you can type.

A friend of mine helped me with out by writing a jQuery code that when the user starts typing in the search field, results show instantly beneath it (from my mySQL database), which you can click to take you to the result.

However, if you click off the search field, and the CSS is no longer set to :focus the jQuery (lets call them) quick results, do not disappear, obviously – as nothing tells them too.

My question is – How can I make them show when the search box is :focus on and disappear when it is not.

This is the CSS for the search bar:

.search_bar input[type="text"] {
position: absolute;
right: 0px;
top: -18px;
    padding: 0 0 0 22px;
    width: 30px;
    height: 54px;
    -webkit-transition: width 0.5s ease-in-out;
}

.search_bar input[type="text"]:focus{
    width: 550px;
    outline: none;
}

And this is the CSS for the jQuery results (the space where they generate:

#searchResult {
position: absolute;
z-index: 1;
width: 536px;
right: 20px;
top: 40px;  
text-align: left;
}

This the the jQuery:

jQuery(document).ready(function()
    {
        jQuery('#search_bar').keyup(db_search);
    });

    function db_search()
    {
        var searchFor = jQuery('#search_bar').val();
        if (searchFor=="")
        {
            document.getElementById("searchResult").innerHTML="";
            return;
        } 
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("searchResult").innerHTML=xmlhttp.responseText;
            }
        }

        xmlhttp.open("GET","php/searchFor.php?search="+searchFor,true);
        xmlhttp.send();
    }

Here is some stills to illustrate my problem, if it is not clear.

I tried to use this CSS to hide it:

.search_bar input[type="text"]:focus + #searchResult {
display: block;
}

To display: block when :focus on search bar.

#searchResult {
position: absolute;
z-index: 1;
width: 536px;
right: 20px;
top: 40px;  
text-align: left;
display: none;
}

To hide the whole div and its content when it’s not :focus on the search bar.

But this doesn’t work and I can’t figure out how else I would do it, I still have a very very limited knowledge of jQuery/javascript so if the answer lies in this, could some one be kind enough to share the answer? I tried to research the hide() function in jQuery but I didn’t know where to place it, I assume it would be in an if statement?

Sorry for a long question, I tried to be as clear and thorough as possible.

Answer 1

You’ll probably want to take a look at the jquery .blur() event: http://api.jquery.com/blur/.

You can try this (untested) code:

 jQuery('#search_bar')
     .keyup(db_search)
     .blur(function() { $("#searchResult").hide(); });

Explanation: the blur event is called whenever the element loses focus. In this scenario, the user puts the focus on the #search_bar. When the #search_bar has a keyup event, it does the search as you were doing before, but when #search_bar loses focus (the user clicked somewhere else, or on one of the results) the #searchResults are hidden.