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>

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;
    }

example of response I can see on sa keywords:

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

Answer

You are appending new options inside input but you need to append it inside datalist .Also , option.value = item.name will give you result has [Object object] that’s why you need to specify field i.e : id ,name to access same elements . i.e : item.name .

Demo Code :

var ajax_suppliers_id = document.getElementById('supplier_list');//daatlist id 
var response = [{
  "id": "3",
  "name": "Samsug"
},{
  "id": "3",
  "name": "Samsug1"
},{
  "id": "3",
  "name": "Samsug2"
}];
ajax_suppliers_id.innerHTML = "";
response.forEach(function(item) {
  // Create a new <option> element.
  var option = document.createElement('option');
  option.value = item.name;//get name 
  ajax_suppliers_id.appendChild(option);
});

<input list="supplier_list" class="form-control" id="ajax_suppliers_id">
<datalist id="supplier_list"></datalist>