Closing a div box after it has been added to the DOM (html body) using javascript

Question

I was hoping to get some help. I set up a JSfiddle below:

http://jsfiddle.net/y7mEY/102/

I was looking to have the grey div box that appears when the input box is clicked (that will have the search options in it) to close when I click anywhere outside it.

I would like to not load jquery and therefore keep everything in javascript.

Any help?

code below:

HTML

<div id = "searchHousing">
    <input type="text" name="value" id="fillIn"> 
</div>

CSS

.searchBox {

    position: absolute; 
    font-family:Arial;
    font-size: 10pt;
    color:black;
    height: 200px;
    width: 200px;
    padding-left: 3px;
    padding-top: 1px;
    border: 1px solid white;
    background-color: grey;

}

#fillIn {

    width: 200px;
    height: 28px;
    border-radius: 4px;
    font-size: 16px;
    margin-bottom: 2px;

#searchHousing {

float: left;

}

Javascript:

var inputSearch = document.getElementById('fillIn');

inputSearch.onclick = function() {
    var searchBox = document.createElement("div"); 
    searchBox.className = "searchBox";
    document.getElementById('searchHousing').appendChild(searchBox);
};

Thanks, Ewan

Answer 1

I would suggest to not create new 'div' on click event. This will result in multiple "searchBox" divs when the input box is clicked multiple times. Needless to say, it will require cleanup effort to remove duplicated divs.

Rather, create the searchBox div in HTML and toggle it's visibility on javascript events.

Updated JSFiddle: http://jsfiddle.net/y7mEY/109/

[

var inputSearch = document.getElementById('fillIn');

inputSearch.onclick = function() {
    document.getElementById('searchBox').style.display = 'block';
};
inputSearch.onblur = function() {
    document.getElementById('searchBox').style.display = 'none';
};

]

Answer 2

If you want to use your current approach, simply use the "onblur" event to remove the element when the element loses focus.

inputSearch.onblur = function() {
  document.getElementById('searchHousing').removeChild(document.getElementsByClassName("searchBox")[0]);
}

But as CVG mentions, creating/deleting elements live is a fairly bad idea.

Answer 3

You'll be creating div elements all the time, which isn't any good. You could something along the lines of toggling the display attribute.

Just to make sure, if you want the searchBox to stay open and only close if you're clicking outside the searchBox and fillin elements, then you can just follow the click events and only toggle the display if you're clicking outside both. The other methods will just close it out as long as you're not typing in the input, and if you want to place tools or something within the div, then that would be useless.

document.addEventListener('click', function(e) {
    if(e.target.id != "searchBox" && e.target.id != "fillIn")
        document.getElementById("searchBox").style.display="none";
});

Full demonstration: JSFiddle

Answer 4

The problem with onBlur as the other answers suggest is that you will then hide the search options div every time you click anything in it (since the input field will lose focus). This is probably not what you're looking for. Instead, you can add a click handler for the document to hide the search options, and then add a click handler for the search housing to prevent event propagation (which keeps the document click handler from hiding the options).

• If you click the input box, the handler shows the options
• If you click the input box or the options, the event propagation stops
• If you click anywhere in the document besides the input box or options, the options are hidden

Updated JSFiddle

var inputSearch = document.getElementById('fillIn');
var searchHousing = document.getElementById('searchHousing')

inputSearch.onclick = function(event) {
  document.getElementById('searchBox').style.display = 'block';
};
searchHousing.onclick = function(event) {
  event.stopPropagation(); // won't be passed to document.onclick
};
document.onclick = function() {
  document.getElementById('searchBox').style.display = 'none';
};