I'm trying to implement an autocomplete feature that gets a dataset from php and then uses that to populate the autocomplete dropdown. Right now I've got it so that when the user types in enough characters to narrow down the list to 1 item, another 2 textboxes are filled with related information.
So basically, the system works if I type in enough chars to narrow down the result to 1 row. But when I try to select an item that is listed in the drop down on the text box, the other two fields do not update.
The API documentation suggests that I need to use the jquery change event but I am not sure how to implement it. I would appreciate some help.
Here's my javascript code.
$( function() {
$( "#competency" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "<?php echo base_url()."index.php/Test/search"; ?>",
dataType: "json",
data: request,
success: function(data) {
if (data.response == 'true') {
response(data.message);
if (data.found == 'true') {
$( '#competencyDescription' ).val(data.definition);
$( '#competencySource' ).val(data.src);
} else {
$( '#competencyDescription' ).val("");
$( '#competencySource' ).val("");
}
}
}
});
}
});
});
Here's my php
public function search() {
// Trim data typed into text box
$compName = trim($this->input->get('term', TRUE));
$this->load->model('Competencies');
$compController = new Competencies();
$query = $compController->getCompetenicesByName($compName);
if ($query->num_rows() == 1) {
$data['found'] = 'true';
}
if ($query->num_rows() > 0) {
$data['response'] = 'true';
$data['message'] = array();
foreach ($query->result() as $row) {
$data['message'][] = array(
'label'=>$row->CompetencyName,
'value'=>$row->CompetencyName
);
$data['definition'] = $row->CompetencyDefinition;
$data['src'] = $row->CompetencyDefinitionSource;
}
} else {
$data['response'] = 'false';
}
echo json_encode($data);
}