I try to make an autocomplete list and I'm getting data from a database using Ajax, I'm using CodeIgniter framework, but the problem is that I get an error in the console and it's related to the jequry.min.js, this my code in 3 step mvc: the controller :
function get_autoComplete(){
$keyword=$this->input->post('keyword');
$data=$this->waiting_model->GetRow($keyword);
echo json_encode($data);
}
model :
public function GetRow($keyword) {
$this->db->order_by('id', 'DESC');
$this->db->like("firsName", $keyword);
return $this->db->get('patients')->result_array();
}
and the view
<div class="os-tabs-controls os-tabs-complex">
<div class="form-group">
<input type="text" id="patients_search" autocomplete="off" name="patients_search" class="form-control" placeholder="patient name">
<ul class="dropdown-menu txttxtPatientName" style="margin-left:15px;margin-right:0px;" role="menu" aria-labelledby="dropdownMenu" id="DropdownName"></ul>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#patients_search").keyup(function () {
$.ajax({
type: "POST",
url: " <?php echo site_url('admin/waiting/get_autoComplete/?');?>",
data: {
keyword: $("#patients_search").val()
},
dataType: "json",
success: function (data) {
if (data.length > 0) {
console.log('data.length = ' + data.length);
$('#DropdownName').empty();
$('#patients_search').attr("data-toggle", "dropdown");
$('#DropdownName').dropdown('toggle');
}
else if (data.length == 0) {
$('#patients_search').attr("data-toggle", "");
}
$.each(data, function (key,value) {
if (data.length > 0)
$('#DropdownName').append('<li role="displayCountries" ><a role="menuitem dropdownCountryli" class="dropdownlivalue">' + value['name'] + '</a></li>');
});
}
});
});
$('ul.txtPatientName').on('click', 'li a', function () {
$('#test').val($(this).text());
});
});
</script>
intel that I show nothing in the console as an error for this function so I rewrite the ajax function in the console I show this msg