AJAX search suggestions on user typing-CodePudding

The script makes an ajax call to a PHP file on input change, but the JSON isn't parsing and I don't know why Here's the Javascript

        input.addEventListener("input", (event) => {output.innerHTML = "Cerca "   document.getElementById("tophead-searchbar").value   " su Nevent";
        var searchqueryajax = new XMLHttpRequest;
        ajaxquerylink = "suggerimenti_query.php?query="   document.getElementById("tophead-searchbar").value;
        searchqueryajax.addEventListener("load", innerhtmlqueries());
        searchqueryajax.open("GET", ajaxquerylink);
        searchqueryajax.send();
        function innerhtmlqueries() {
            queriesarray = JSON.parse(searchqueryajax.responseText);
        }
        });

The input is document.getElementById("tophead-searchbar") and the output is the Result1, it says the value of the input Here is the PHP Script:

$query = $_REQUEST["query"];
$queryresults = mysqli_query($name, "SELECT * FROM search_queries WHERE MATCH(ID, QUERY) AGAINST('$query') LIMIT 7");
if ($queryresults->num_rows > 0) {
    $autocompleteresults = array();
    while($row = mysqli_fetch_array($queryresults)) {
        $results["ID"] = $row["ID"];
        $results["value"] = $row["QUERY"];

        $results["type"] = $row["TIPO"];
        array_push($autocompleteresults, $results);
    }
}
echo json_encode($autocompleteresults);

There are no PHP errors on the log and i don't see the PHP File on Network Tab of the browser F12 editor

I tried to do some things on Javascript code but i still don't notice the request on Network Tab

Edit: I also have another ajax call like this in the same file and it works

        var checkajaxiflogged = new XMLHttpRequest();
        checkajaxiflogged.addEventListener("load", checkajaxiflogged_function);
        checkajaxiflogged.open("GET", "topbarprofileinformation.php");
        checkajaxiflogged.send();
        function checkajaxiflogged_function() {
            topheadjsonresponse = JSON.parse(checkajaxiflogged.responseText);
            document.getElementById("tophead-account-img").style.backgroundImage = "url('../beta/immagini_profilo/"   topheadjsonresponse.profiloimg   "')";
            if (topheadjsonresponse.isloggedin == "yes") {
                document.getElementById("tophead-accedi-btn").style.display = "none";
                document.getElementById("tophead-account-img").style.display = "block";
                document.getElementById("Immagine-Profilo-Menu-Principale").style.backgroundImage = "url('../beta/immagini_profilo/"   topheadjsonresponse.profiloimg   "')";
                document.getElementById("Nome-Profilo-Menu-Principale").innerHTML = topheadjsonresponse.displayname;
                document.getElementById("Username-Profilo-Menu-Principale").innerHTML = "@"   topheadjsonresponse.username;
            }
        }

CodePudding user response：

You can use jquery for simplified get request

input.addEventListener("input", (event) => {
output.innerHTML = "Cerca "   document.getElementById("tophead- 
searchbar").value   " su Nevent";

getData(); //Call the get function
});

// Ajax function to get data using jquery
function getData() {
let ajaxquerylink = "suggerimenti_query.php?query="   document.getElementById("tophead-searchbar").value; 
$.ajax({
    url : ajaxquerylink,
    type : "GET",
    success : function(data)
    {
        let response = JSON.parse(data);
        console.log(response);
    }
});
}

CodePudding user response：

I solved by myself, in this row

searchqueryajax.addEventListener("load", innerhtmlqueries);

I removed the () in innerhtmlqueries() and now the call response works Thanks anyway for the support!