I am trying to create autocomplete to provide the selection of trucks.
in my trucks controller I have the following method:
public function getAjaxList()
{
$this->autoRender = false;
if ($this->request->is('ajax')) {
$name = $this->request->getQuery('term');
$results = $this->Trucks->find('all', [
'conditions' => ['truck_number LIKE' => $name . '%'],
'limit' => 10,
'fields'=>['id','truck_number']
]);
// debug($results);
$resultsArr = [];
foreach ($results as $result) {
$resultsArr[] =['label' => $result['truck_number'], 'value' => $result['id']];
}
return $this->response->withType('application/json')->withStringBody(json_encode($resultsArr));
}
in my form
<?= $this->Form->control('truck_id', ['type' => 'text']); ?>
<script>
$(document).ready(function(){
jQuery('#truck-id').autocomplete({
source:'<?= $this->Url->build([ "controller" => "Trucks", "action" => "getajaxlist"],["fullBase" => true,]); ?>',
minLength: 2,
delay:0,
select: function(event, ui) {
event.preventDefault();
$("#truck-id").val(ui.item.label);
},
focus: function(event, ui) {
event.preventDefault();
$("#truck-id").val(ui.item.label);
}
});
});
</script>
this all is working good, however, suggestions are loaded after a few seconds. truck tables contain only 30 rows. I have created an index on truck_number field.
each ajax call takes 750ms to 950ms. is it normal?