display ajax information under input field - php

Question

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 1

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>