How to add Search API Autocomplete to textfield in a custom form

Created on 21 May 2019, over 5 years ago
Updated 7 January 2024, 10 months ago

I have created a view (view id = `coc_campaign_site_search`) which uses a Search API index. I have exposed the fulltext search filter and it works correctly when I test it. What I would like to do now is the attach that autocomplete functionality to a custom form which I have built. The goal is to have autocomplete results displayed when the user enters text into the textfield on the custom form. The autocomplete results should behave in the same way as they do when using the exposed fulltext search filter (i.e. when click one of the auto complete results the user is take to relevant page).

I have tried to add it using the following code with partial success. Note that the autocomplete id and the view id have the same machine name (view id = `coc_campaign_site_search`; autocomplete id = `coc_campaign_site_search`)

public function buildForm(array $form, FormStateInterface $form_state) {
    $form['search_terms'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Search'),
      '#attributes' => [
        'placeholder' => $this->t('Search'),
      ],
      '#autocomplete_route_name' => 'search_api_autocomplete.autocomplete',
      '#autocomplete_route_parameters' => [
        'search_api_autocomplete_search' => 'coc_campaign_site_search',
      ],
    ];
    $form['actions']['#type'] = 'actions';
    $form['actions']['submit'] = [
      '#type' => 'submit',
      '#value' => $this->t('Search'),
      '#button_type' => 'primary',
      '#attributes' => [
        'id' => 'coc-campaign-sites-search-submit-btn',
      ],
    ];
    return $form;
  }

I currently have two problems with this:

  1. When I click on one of the autocomplete results, then it just inserts the URI of that page into the text field rather than redirecting the user to that page.
  2. The autocomplete results should be filtered by a taxonomy term. In the view, the term id is passed as a contextual filter. When I add the autocomplete functionality using the above code, the autocomplete results are not being filtered by the term id

My guess is that the above code is loading the autocomplete Search object but is not actually using the View. Would appreciate any suggestions on where to go from here.

💬 Support request
Status

Fixed

Version

1.2

Component

General code

Created by

🇦🇺Australia Begun

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇷🇴Romania oana.hulpoi

    Hi,

    Something like this worked for me on a custom form, in Drupal 10, where "all_content_solr" is the autocompletion setting that I enabled and configured (/admin/config/search/search-api/index/content/autocomplete/all_content_solr/edit)

     $form['search'] = [
         '#type' => 'search_api_autocomplete',
          '#search_id' => 'all_content_solr',
          '#title' => $this->t('search'),
          '#maxlength' => 64,
          '#size' => 64,
          '#weight' => '0',
          '#placeholder' => $this->t('Search'),
          '#default_value' => $keys,
        ];
    

    Regards,

  • Thanks @oana.hulpoi

    Do you know why when I go to the "Autocomplete" tab ("admin/config/search/search-api/index/solr_autocompletion_search/autocomplete") I only have "Search views"? And I can't create autocomplete for a custom form ?

    Thank you.

Production build 0.71.5 2024