Custom form, input with ajax autocomplete not working

Question

I have developed a module with a custom form but I don't know why ajax autocomplete doesn't work. The form works good, but in one of the input field I'd like to have a autocomplete function. The next is part of my code:

src\Form\Mycustomform.php

...
public function buildForm(array $form, FormStateInterface $form_state, $parameter = NULL) {
...
    $form['customer'] = array(
      '#type' => 'textfield',
      '#title' => t('Customer'),
      '#id' => 'inpCustomer',
      '#autocomplete_route_name' => 'mymodule.autocomplete',
    );
....

mymodule.routing.yml

mymodule:
  path: 'mycustompath'
  defaults:
    _form: '\Drupal\mymodule\Form\Mycustomform'
    _title: 'Records'
  requirements:
    _permission: mycustompermission

mymodule.autocomplete:
  path: 'autocomplete'
  defaults:
    _controller: '\Drupal\mymodule\Controller\MyModuleController::autocomplete'
    _format: json
  requirements:
    _permission: 'access content' 

\src\Controller\MyModuleController.php

...
class MyModuleController extends ControllerBase {

    public function autocomplete(Request $request)
    {
        $string = $request->query->get('q');
        $matches = array();
        \Drupal:logger('autocomplete')->notice($string);
        $query = \Drupal::entityQuery('node');
        $query->condition('type','customers');
        $query->condition('title', '%'.$string.'%', 'like');
        $query->sort('title');
        $query->range(0,20);
        $entity = $query->execute();
        $nodos = \Drupal::entityTypeManager()->getStorage('node')->loadMultiple($entity);
        foreach ($nodos as $row) {
            $matches[] = array('value' => $row->getTitle(), 'label' => $row->getTitle());
        }

        return new JsonResponse($matches);
    }
}

If I see drupal log, I never get a register as expected. But if I see conosole log, I don't see ajax request. How could I find where is the problem? I think there isn't an ajax call when I write some letters on the input field. I don't see the circle on the right of the input that is shown when autocomplete is working.

Answer 1

After some tests I have found the problem. My code is right and it works good. The problem was the template file input--textfield.html.twig. Input textfield needs some automplete classes to work and this template deleted them to add some other classes. The required classes are: form-autocomplete form-text ui-autocomplete-input. I have changed this template file to add a new class I need but without deleting the other, and then, autocomplete works.

Answer 2

I do not tested your code but I see that your custom form doing completely the same like entity_autocomplete form element https://www.drupal.org/node/2418529

$form['customer'] = array(
      '#type' => 'entity_autocomplete',
      '#title' => t('Customer'),
      '#id' => 'inpCustomer',
      '#target_type' => 'node',
      '#selection_settings' => array(
        'target_bundles' => array('customers'),
        ),
    );