Невозможно заполнить данные в тегах <ul>, как указано в демонстрации Autocomplete

Question

Я использую Flight PHP Framework для PHP-кода и JavaScript для реализации автозаполнения. Я ссылался на этот код автозаполнения по этой ссылке https://github.com/TarekRaafat/autoComplete.js.Я получаю ответ json на вкладке Network в консоли, когда выполняется звонок.Но я не могу увидеть заполненные данные из бэкэнда, как показано на скриншоте.

Javascript Code

    // The autoComplete.js Engine instance creator
const autoCompletejs = new autoComplete({
    data: {
        src: async () => {
        // Loading placeholder text
        document.querySelector("#autoComplete").setAttribute("placeholder", "Loading...");
        //let keyword = document.querySelector("#autoComplete").nodeValue;
        //alert(keyword);
        if(keyword != '' && keyword != undefined) {
            // Fetch External Data Source
            const source = await fetch("https://nn.example.com/search_practitioners/"+keyword);

            const data = await source.json();
            // Returns Fetched data
            return data;
        } else {
            return null;
        }
        },
        key: ["first_name", "last_name", "area"]
    },
    sort: (a, b) => {
        if (a.match < b.match) return -1;
        if (a.match > b.match) return 1;
        return 0;
    },
    placeHolder: "First Name",
    selector: "#autoComplete",
    threshold: 0,
    //searchEngine: "strict",
    highlight: true,
    maxResults: 10,
    resultsList: {
        container: source => {
        resultsListID = "autoComplete_results_list";
        return resultsListID;
        },
        destination: document.querySelector("#autoComplete"),
        position: "afterend"
    },
    resultItem: (data, source) => {
        return `${data.match}`;
    },
    onSelection: feedback => {
        const selection = feedback.selection.value.first_name;
        console.log("feedback.selection.value.first_name " +selection);
        // Render selected choice to selection div
        document.querySelector(".selection").innerHTML = selection;
        // Clear Input
        document.querySelector("#autoComplete").value = "";
        // Change placeholder with the selected value
        document.querySelector("#autoComplete").setAttribute("placeholder", selection);
        // Concole log autoComplete data feedback
        console.log(feedback);
    }
});

PHP Code

    function search_practitioners($keyword) {
        $mysqli = Flight::get('mysqli');

        $userInput = $keyword;

        // Runs Query On Database
        $query = 'SELECT prof_login_details.first_name,prof_login_details.last_name,prof_user_details.area FROM prof_user_details  INNER JOIN prof_login_details ON prof_user_details.prof_login_id = prof_login_details.id WHERE prof_login_details.first_name LIKE "%'.$userInput.'%" OR prof_login_details.last_name LIKE "%'.$userInput.'%" ';

        // Runs Query And Places It
        $result = $mysqli->query($query);

        // Kills Script If No Results
        if (!$result) {
            echo "Problem with query " . $query . "<br/>";
            echo mysqli_error($mysqli);

            return json_encode(array());

        }

        $first_name = mysqli_fetch_all_alt($result);

        echo json_encode($first_name);
    }

HTML-код

<div class="container">

   <div class="body" align="center">
      <input id="autoComplete" type="text" tabindex="1" name="keyword">
      <div class="mode">
          <h4>mode</h4>
          <div class="toggele">
              <div class="toggeler">Strict</div>
          </div>
      </div>
      <div class="selection"></div>
   </div>
 </div>