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"}]
Advertisement
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>