"click" event not responding on mobile

Question

I have been working on a search process for the Web App I am developing for my business.

I currently have a search field that, when conditions are met, makes a DIV visible that contains suggested matches of the searched term for the user. This all works correctly, except I am having issues with an eventListener responding correctly to mobile "touch". The eventListener hides the DIV when the BODY of the page is clicked anywhere at all. However, on mobile device, I have to specifically touch an input field or other element on the page for it to execute the Java Function.

I would rather that a touch responds the same as a mouse click... and I am able to touch the page anywhere for it to execute the Java Function and hide the DIV. How can I do this?

Disclaimer: I have never written or edited Javascript before this, so what I am currently using is cut and pasted together from many resources.

here is the code:

function myFunction() {
    var input = document.getElementById("searchterm").value;

        if (input && input.length >= 2) {

            $.ajax({
            type: "POST",
            url: "searchengine.php",
            data: {input : input},

            success: function(data) {

            if (data){
            document.getElementById("body").addEventListener("click", resultsVisibility);   
            document.getElementById("results").style.visibility='visible';
            document.getElementById("results").innerHTML = data;
            }

            else{
            document.getElementById("results").style.visibility='hidden';
            }

            }

            }); 

        }
        else {
            document.getElementById("results").style.visibility='hidden';
            return false;
        }
}

function resultsVisibility() {
    document.getElementById("results").style.visibility='hidden';
    document.getElementById("body").removeEventListener("click", resultsVisibility);
}

Answer 1

Did you mean to query the body tag with this?

document.getElementById("body");

That would query an element with an id attribute of body. Not sure what you meant. If you did mean the actual document body, you can refer to that with simply: document.body. No querying needed. If you do need an element with an id of body, then you can change my below code.

EDIT: Switched to div with an id of body. Forewarning, you should avoid ids and use classes instead. I've seen far too many sites have errors thanks to duplicate ids. classes don't suffer from the same fate.

Just attach a touchstart event in addition to your click event:

(function() {
    var results = document.getElementById("results");
    var fakeBody = document.getElementById("body");
    var resultsVisibility = function() {
        results.style.visibility = "hidden";
        fakeBody.removeEventListener("click", resultsVisibility);
        fakeBody.removeEventListener("touchstart", resultsVisibility);
    };

    var myFunction = function() {
        var input = document.getElementById("searchterm").value;

        if (input && input.length >= 2) {
            $.ajax({
                type: "POST",
                url: "searchengine.php",
                data: { input: input },

                success: function(data) {
                    if (data) {
                        fakeBody.addEventListener(
                            "click",
                            resultsVisibility
                        );
                        fakeBody.addEventListener(
                            "touchstart",
                            resultsVisibility
                        );
                        results.style.visibility = "visible";
                        results.innerHTML = data;
                    } else {
                        results.style.visibility = "hidden";
                    }
                }
            });
        } else {
            results.style.visibility = "hidden";
            return false;
        }
    };
})();

Also, you should store multiply used elements rather than querying the DOM over and over. Querying the DOM is slow. I also took the liberty of wrapping all of your code in an IIFE. This keeps you from having implicit globals.