Problem with ajax autocomplete. working but slow, even with only 30 records in table


#1

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?


#2

Is it CakePHP 2 or CakePHP 3?


#3

CakePHP 3.
I figured it out. It responds slowly because I have enabled debug toolbar. When I turn off debug bar, it works properly.

Thanks.