I have a form that is inflated inside a box. In that form I have an autocomplete field. I want to allow the user, when they select an item from the autocomplete’s suggestions they are automatically redirected to the appropriate page.

My current idea is to handle this in JS. But I don’t like this as it makes it very difficult to use Drupal’s routing system to route — instead I have to hardcode things, which is bad.

class AutocompleteSearchForm extends FormBase {    public function getFormId() {     return 'search_form';   }    public function buildForm(array $form, FormStateInterface $form_state) {     $form['search'] = array(       '#type' => 'textfield',       '#title' => $this->t('Lookup'),       '#description' => $this->t('Search.'),       '#placeholder' => $this->t('Search'),       '#autocomplete_route_name' => 'block.autocomplete.callback',       '#autocomplete_route_parameters' => array('name' => 'name'),       '#attached' => array(         'library' => array('module/autocomplete'),       ),     );     return $form;   }    public function submitForm(array &$form, FormStateInterface $form_state) {     Drupal::logger('module')->warning('form submitted for' . $form_state->get('search'));   } } 

And my JS is:

(function ($) {     $('#edit-search').on('autocompleteclose', function (event, node) {         var entity_id = $(this).val();         alert(entity_id);     }); }(jQuery)); 

As you can see, I tried to manage this through the callback, but I don’t expose a button and this doesn’t submit unless the user hits the “enter” button, which isn’t exactly intuitive.

Is JS the best way to handle this? If it is, is there a good way to get access to Drupal’s path/router system from JS?