Drupal entity autocomplete form element and customised result for entity autocomplete field using views

Here we are discussing different ways of implementing entity autocomplete text box field in Drupal custom form.

As you know we need data to be fetched  from the backend to show an autocomplete list. In Drupal, there is an  ​​entity_autocomplete form element that will automatically list entity data in autocomplete text box.

In this article we are discussing below points about loading data in entity autocomplete.

•      Load data from all entities 
•      Load data from entities using filters and target bundles
•      Load data from views with customized field search in entity autocomplete

Entity Auto complete – Load data from all entities

For listing data from Drupal entities like node,user,taxonomy, files etc. we can use the below form element.

$form['all_nodes'] = [
     '#type' => 'entity_autocomplete',
     '#title' => $this->t('All Contents'),
     '#target_type' => 'node',    
     '#multiple' => TRUE
   ];

So here we are loading all titles of node entity which include all content title of all content types. So auto complete field will show all content titles of all content types as below.

Similar way we can load taxonomy as below.

$form['all_terms'] = [
     '#type' => 'entity_autocomplete',
     '#title' => $this->t('All Terms'),
     '#target_type' => 'taxonomy_term',
        
     '#multiple' => TRUE
   ];

Here all term names will be listed from all vocabularies.

Here if we set #multiple=> True , users can select multiple values in dropdown by using comma. If you are not mentioning #multiple by default it is false. 

Here you can see a dropdown list of all term names  in all vocabularies irrespective of parent or child. Later in this article we will discuss how to customize this using views.

Load all user names in the autocomplete field using below. Here the target type is user.

$form['all_users'] = [
     '#type' => 'entity_autocomplete',
     '#title' => $this->t('All Users'),
     '#target_type' => 'user',
     //'#tags' => TRUE,  // by default false -
    
     '#multiple' => TRUE
   ];

While type in the text field you could see all usernames as below.

So here we are not applying any filter so eventually it displays all the users irrespective of user roles. Later in this article we will discuss how to filter it.

In above we have explained how to display entities in autocomplete without any filters or selections. So it is displaying all titles/terms under each entity. 

Next we are discussing how to apply selection settings and target type attributes for filtering entities.

Entity autocomplete – Load data from entities using filters and target bundles

Here we are discussing how to customize autocomplete results using filters and target bundles.

In order to filter target nodes in autocomplete we can provide content types required in target bundles as below enclosed in selection settings.

$form['selected_nodes'] = [
     '#type' => 'entity_autocomplete',
     '#title' => $this->t('Selected Contents'),
     '#target_type' => 'node',
     '#multiple' => TRUE,
     '#selection_settings' => [
       'target_bundles' => ['article','page'],
     ]
   ];

This will list content titles only from content types Basic page and article. These are content type machine names.

Same way provide machines names of vocabularies  for filtering taxonomy terms from specific vocabularies.

$form['selected_terms'] = [
     '#type' => 'entity_autocomplete',
     '#title' => $this->t('Selected  Terms'),
     '#target_type' => 'taxonomy_term',
     
     '#selection_settings' => [
       'target_bundles' => ['categories','tags']
     ],
    
     '#multiple' => TRUE
   ];

Here categories and tags are machine names of vocabularies. 

Same way below provides autocomplete of user entities where users are listed based on roles.

$allowed_roles = ['administrator', 'publisher', 'superhero'];
   $form['user_select'] = [
     '#type' => 'entity_autocomplete',
     '#title' => $this->t('Select User'),
     '#target_type' => 'user',
     '#selection_settings' => [
       'filter' => [
         'type' => 'role',
         'role' => $allowed_roles,
       ],
     ],
   ];

Here inside selection settings filter, array provided with type=role and array of allowed roles.

Entity autocomplete – Load data from views with customized field search in entity autocomplete

Here we are discussing different ways of customization of entity autocomplete results using views.

There are a lot of advantages if we are using views entity reference display as source for populating autocomplete.

We can customize which field need to  be searched and which field  need to shown in autocomplete while the user searches in the text box. Also we can apply different kinds of filter criteria in view entity reference display so that we can filter out  the data to be listed in autocomplete.

By default in entity autocomplete, content title for node and user name for user entity is being  loaded in autocomplete. But using views entity reference we can customize which field name  needs to be listed in autocomplete.

For example I have to load matching users’ emails in the autocomplete field while user types in textbox instead of usernames.

For this first create a view of type users. Let us say a view created as users_by_mail. Create page display for views , after creating view Add entity reference display to the view.

Create a display as below for name and email fields , if you want to show only email in autocomplete field remove name and keep only email.

One more thing you have to do in this display is select format ->settings  and make sure you have selected email as a search field.

Click apply and save the view.

So now our entity reference view is ready.

Create autocomplete fields as below with reference to the view we have just created.

$form['list_user_view'] = [
     '#type' => 'entity_autocomplete',
     '#title' => $this->t('Select User by mail'),
     '#target_type' => 'user',
     '#selection_handler' => 'views',
     '#selection_settings' => [
       'view' => [
         'view_name' => 'users_by_mail',
         'display_name' => 'entity_reference_1',
         'arguments' => []
       ],
       'match_operator' => 'CONTAINS'
     ],
     //'#default_value' => $user_object
   ];

Here you can see  target type is user and selection handler is views.

Inside the selection settings, array provides view details like view machine name and display machine name.

Also don’t forget to provide  ‘match_operator’ => ‘CONTAINS’

Now you can see only user emails getting searched in autocomplete field.

Same way  we can do with  node entities. For example we have to load the article short title field in autocomplete. For this create a view of type Article  with Entity reference display.

Assume that we have an extra field called short title in Article content type with some sample content.

Create   a view called article_by_short_title of type content and add an entity reference display.

In fields add short title as field and then make sure in format ->  settings, short title selected as search field as below.

Now the view is ready. Create an autocomplete field as below by referring to the above view.

$form['article_by_summary'] = [
     '#type' => 'entity_autocomplete',
     '#title' => $this->t('Select Article Short title'),
     '#target_type' => 'node',
     '#selection_handler' => 'views',
     '#selection_settings' => [
       'view' => [
         'view_name' => 'article_by_short_title',
         'display_name' => 'entity_reference_1',
         'arguments' => []
       ],
       'match_operator' => 'CONTAINS'
     ],
    
   ];

So here we have provided the view name and view display in selection settings. So we can see only short titles will be loaded.

Same way create view for taxonomy terms with vocabulary selected as categories. Named the view as Parent categories as we are loading parent terms in entity display which then loaded into the autocomplete field.

Add entity reference display as below, also in format  settings enable term name as search field.

Additionally in filter criteria add filter  Term Parent to allow only parent terms.

Then configure selection settings as below in your autocomplete field.

$form['term_parents'] = [
     '#type' => 'entity_autocomplete',
     '#title' => $this->t('Select Category parent'),
     '#target_type' => 'node',
     '#selection_handler' => 'views',
     '#selection_settings' => [
       'view' => [
         'view_name' => 'parent_categories',
         'display_name' => 'entity_reference_1',
         'arguments' => []
       ],
       'match_operator' => 'CONTAINS'
     ],
    
   ];

So you can see only parent terms  while searching the autocomplete textbox.

Here we discussed different ways of customizing results  entity autocomplete form element without any customization.

In next article we will discuss how to create custom plugins and controllers to load data  in autocomplete fields.