Using Autocomplete Deluxe in Drupal CMS

Don’t forget to subscribe to our YouTube channel to stay up-to-date.

The default autocomplete widget for taxonomy terms in Drupal works, but it has limitations that affect user experience.

Users need to know what terms exist before they can search for them, and there’s no easy way to reorder selected terms.

Autocomplete Deluxe solves these problems by providing an enhanced widget with better usability.

This tutorial explains how to install and configure the Autocomplete Deluxe module to improve the tagging experience on Drupal sites.

Installing Autocomplete Deluxe

Begin by downloading the module using Composer:

composer require 'drupal/autocomplete_deluxe:^2.1'

Go to the Extend page in your Drupal admin menu and enable the Autocomplete Deluxe module.

Configuring Autocomplete Deluxe Widget

Once the module has been installed, go ahead and use the widget on an entity reference field.

1. Navigate to Structure > Content types

2. Select the content type that contains your tags field

3. Click on “Manage form display”

4. Find your entity reference field in the list

5. Change the widget from “Autocomplete (Tags style)” to “Autocomplete Deluxe”

Customizing Autocomplete Deluxe Settings

After selecting the Autocomplete Deluxe widget, click the cogwheel icon to access additional configuration options:

1. The Match Operator controls how terms are matched when typing – you can choose “Contains” to match if the term contains the typed text anywhere, or “Starts with” to match only if the term begins with the typed text.

2. You can adjust the “Limit of output” setting to determine how many items appear in the dropdown list. The default is 10, but consider your total number of terms before modifying this value to ensure optimal performance.

3. Custom Messages allow you to personalize the user experience. Set an “Empty value message” to display when no value is entered, and a “Term not found message” to show when a term can’t be found.

4. The “Allow new terms” option enables content editors to create new terms directly from the content creation form, eliminating the need to navigate to the vocabulary management page separately.

Once you’ve configured these settings to your preference, click “Update” to save your changes.

Using Autocomplete Deluxe

Once everything has been configured, navigate to the content edit form, and you should see the autocomplete deluxe widget.

1. Click on the widget to immediately see a list of available terms without having to type anything.

This helps users discover what tags already exist in the system.

2. Select terms by clicking them from the dropdown list, and each selected term appears as a removable tag in the field.

Click on the X icon to remove the term.

3. Reorder terms by clicking and holding a selected term, dragging it to the desired position, and releasing it to place it in the new order.

Benefits of Term Reordering

The ability to reorder terms is particularly valuable for:

• SEO optimization
• Content categorization
• Search result relevance

For example, the first tag can be configured to receive higher importance in search results when using modules like Search API with proper configuration.

Summary

Autocomplete Deluxe enhances Drupal’s taxonomy term autocomplete by immediately displaying terms, simplifying selection, enabling drag-and-drop reordering, and allowing on-the-fly term creation.

These improvements offer a more intuitive content creation process, particularly for sites with large vocabularies.

FAQs