Error with search bar results

Question

I have a search field where I type the term and it looks for references in the database, all right until then. It turns out that when I delete and leave the input blank search, it keeps displaying the results.

This only changes if I write something else, but I wanted the box to disappear if there was nothing written down. How can I fix this?

Those are the HTML and the JS that I used to do. I have already posted another question with this same project but it has been solved.

Search Bar [HTML]

<form id="searchForm">
        <div class="inner-form">
            <div class="input-field second-wrap">
                <input id="busca" name="pesquisar" type="text" placeholder="Qual serviço você está procurando?" />
                <div style="background: #efefef;">
                    <ul id='results' style='list-style: none;margin: 0;'>
                    </ul>
                </div>
            </div>
            <div class="input-field third-wrap">
                <button class="btn-search" id="btnSearch" type="button">
                Pesquisar
                </button>
            </div>
        </div>
    </form>

Functions Onkeyup

document.getElementById("busca").onkeyup = function (e) {
        if(e.keyCode >= 65 && e.keyCode <= 90) {
            var q = this.value === "" ? "*" : this.value;
            sendSearch(q);
        }
    };

Request for information

function sendSearch(q) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "/sistema/Teste.php?val="+q, true);
        xmlhttp.onreadystatechange = function () {
            if(xmlhttp.readyState===4&&xmlhttp.status===200) {
                var json = JSON.parse(xmlhttp.responseText);
                var resultado = "";
                for(var i = 0; i < json.length; i++)
                    resultado +=
                        "<li style='padding: 7px 0'><a data-click='' data-target='" + json[i].id +"' style='color: #48556b;' href='" + json[i].uri + "'><h5 class='m-0'>"+ json[i].nome +"</h5></a></li>";
                document.getElementById("results").innerHTML = resultado;
            }
        };
        xmlhttp.send();
    }

This photo is the research being done

This photo is when I delete. I want to understand what to do so that when I delete the term, this results box also disappear.

Is there anyone who can help me understand this process?

Grateful.

=========================================

RESOLUTION BASED ON THE REPLIES PROVIDED:

I was able to solve the problem by using the @lvr7 user response. Upstairs I added the code of a onKeyup what use and now reset with the modifications I used to make the functionality work. Recalling that I wanted when there was no text on input to div results would be hidden. I achieved this by adding a style='display:none;' in the results div (id="Results"). See:

<ul id='results' style='list-style: none;margin: 0;display:none;'></ul>

And the code onkeyup:

document.getElementById("busca").onkeyup = function (e) {
        if(e.keyCode >= 65 && e.keyCode <= 90 || e.keyCode === 8) {
            var q = this.value === "" ? "*" : this.value;
            if(q === "*") {
                document.getElementById('results').style.display = 'none';
                sendSearch(q);
            } else {
                document.getElementById('results').style.display = 'block';
                sendSearch(q);
            }

        }
    };

Very easy and I was raising heads where I didn’t have, haha.

Answer 1

Create an Event Listener in input. The Event Listener "listens" for changes, and triggers a function. Would look like this

Var inputBusca = Document.getElementById('busca');
Var lista = document.getElementById('results');
Inputbusca.addEventListener('onchange', function(){ 
  If (Inputbusca.value == "") {
        lista.style.display = 'none'
} else {
        lista.style.display = 'block'
}
})

I hope I helped. The formatting is bad because I made in cell