function showHint(str) {
    if (str.length == 0) {
        document.getElementById("hint").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("hint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", `getspecieshint.php?q=${str}`, true);
        xmlhttp.send();
    }
}
document.getElementById('species').addEventListener('keyup', function() {
    // console.log(this.value);
    showHint(this.value);
});

function waitForElementToDisplay(selector, callback, checkFrequencyInMs, timeoutInMs) {

    var startTimeInMs = Date.now();
    (function loopSearch() {
    if (document.querySelector(selector) != null) {
        callback();
        return;
    }
    else {
        setTimeout(function () {
        if (timeoutInMs && Date.now() - startTimeInMs > timeoutInMs)
            return;
        loopSearch();
        }, checkFrequencyInMs);
    }
    })();
}

// Call the below function
waitForElementToDisplay("#species-hint", function(){
    this.addEventListener('click', function() {
        species_select = document.getElementById('species-hint')
        document.getElementById('species').value = species_select.value;
        // console.log(species_select.value);
    });
},1000,9000);