php - display ajax information under input field

I tried to develop an ajax to display some information. My ajax works fine but it do not display the information under the input field. Do you have any idea to resolve that ?

thank you.

     $content .= HTML::inputField('suppliers_id', $suppliers_id . ' ' . $suppliers_name, 'id="ajax_suppliers_id" list="supplier_list" class="form-control"', null, null, null);
      $content .= '<datalist id="supplier_list"></datalist>';
      $suppliers_ajax = this->link('ajax/suppliers.php');



<script>
window.addEventListener("load", function(){
    // Add a keyup event listener to our input element
    document.getElementById('ajax_suppliers_id').addEventListener("keyup", function(event){hinter(event)});
    // create one global XHR object
    // so we can abort old requests when a new one is make
    window.hinterXHR = new XMLHttpRequest();
});

// Autocomplete for form
function hinter(event) {
    var input = event.target;
    var ajax_suppliers_id = document.getElementById('ajax_suppliers_id');
    // minimum number of characters before we start to generate suggestions
    var min_characters = 0;

    if (!isNaN(input.value) || input.value.length < min_characters ) {
        return;
    } else {
        window.hinterXHR.abort();
        window.hinterXHR.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var response = JSON.parse( this.responseText );
                ajax_suppliers_id.innerHTML = "";

                response.forEach(function(item) {
                    // Create a new <option> element.
                    var option = document.createElement('option');
                    option.value = item;
                    ajax_suppliers_id.appendChild(option);
                });
            }
        };
        window.hinterXHR.open("GET", "{$suppliers_ajax}?q=" + input.value, true);
        window.hinterXHR.send()
    }
}
</script>
Copy code

my ajax request called across the input field, I use to display information:

   if (isset($_GET['q'])) {
    $terms = HTML::sanitize(strtolower($_GET['q']));

    $Qcheck = $this->Db->prepare('select distinct suppliers_id as id,
                                                         suppliers_name as name
                                       from :table_suppliers
                                       where suppliers_name LIKE :terms
                                       limit 10;
                                      ');
    $Qcheck->bindValue(':terms', '%' . $terms . '%');
    $Qcheck->execute();

    $list = $Qcheck->rowCount();

    if ($list > 0) {
      $array = [];
      
      while ($value = $Qcheck->fetch()) {
        $array[] = $value;
      }
      
# JSON-encode the response
      $json_response = json_encode($array); //Return the JSON Array

# Return the response
      echo $json_response;
    }
Copy code

example of response I can see on sa keywords:

[{"id":"3","name":"Samsug"}]
Copy code