Autocomplete is often used in taxonomy fields, such as the tags field. It helps users locate previous taxonomy terms by displaying a drop-down selection list according to what they are typing. If multiple entries are allowed, it is often separated by commas. A typical autocomplete field appears like this by default:
Here we introduce the Autocomplete Deluxe module which enhances the autocomplete with a different user experience, and it appears like the following:
This module uses the jQuery UI autocomplete, implements a taxonomy widget and provides a result for multiple selections similar to the Chosen module, but without downloading a plugin.
Getting Started
This is a simple module and no dependencies or modules are required. Install the module using Composer:
composer require 'drupal/autocomplete_deluxe:^2.0'
Simply enable the module after installing.
How to Use Autocomplete Deluxe
After installing and enabling the module, it can be used in different content types. Here we use the default content type of articles as an example, in which there is a field ‘Tags’ which is a taxonomy. We shall also use this ‘Tags’ field for illustration.
Go to the “Manage form display” on the Article content type, Structure -> Article -> Manage form display (/admin/structure/types/manage/article/form-display).
On the ‘Tags’ field, select “Autocomplete Deluxe”. This option will become available after the module is installed and enabled.
Click on the cogwheel on the right-hand-side and go into more detailed configuration.
The configurations are self-explanatory.
But make sure you check “Allow new terms”. This will allow you to create new terms when using the field, instead of going to the taxonomy section to create a term.
Test Autocomplete Deluxe Widget
Now that the widget has been configured, go and create an article.
Click on Content -> “Add content” -> Article (/node/add/article).
Go to the ‘Tags’ field, and there you will find a small blue box appearing, and a drop-down list from the existing terms will appear. Terms can be typed and selected accordingly.
Multiple terms can be selected in this example because the ‘Allowed number of values’ on the ‘Tags’ field in ‘Article’ is configured as ‘Unlimited’.
While entering multiple terms, it does not require the ‘comma’ separator. Each term selected will appear like a small badge. Simply click on the associated small red ‘x’ cross sign to remove a selected term.
Note that the selected items can even be dragged around to a different order, which is a feature not available in the original autocomplete.
If new terms are added, a message will appear as per configuration setting, like this:
Summary
This Autocomplete Deluxe module delivers a better user experience compared with the original autocomplete. It is simple, light-weight, easy to configure, and does not require additional dependencies or modules for Drupal. Next time when you build a Drupal site, think about using the Autocomplete Deluxe module.
