Customize Entity Reference Autocomplete Results using Views in Drupal

An entity reference field allows you to create relationships between other entities such as pages and articles. The field comes with an autocomplete widget that will enable you to search and select other entities.

When you search for items to reference, just the titles are returned and in most cases, this is enough. But when you have lots of content with similar titles using the autocomplete widget becomes problematic because it’ll return similar results.

We can customize what is returned in the autocomplete widget using the Views module. No extra modules are required.

In this tutorial, you’ll learn how to use Views to change the autocomplete results.

The autocomplete results will go from this:

To this:

Quick Summary

To customize the autocomplete results, complete the following steps:

1. Create a View with the “Entity Reference” display.

2. Edit the entity reference field settings and configure the “Reference method” to use the created view display.

For a more detailed explanation, continue reading.

Getting Started

Make sure you have the Views and Views UI module installed. You do not need to download any extra modules.

Entity Reference Field

Let’s start by creating an entity reference field called Related on the Article content type. Editors will be able to reference a page or article using the field.

Note: If you’ve already created an entity reference field, skip this section.

1. Go to Structure, “Content types” and click on “Manage fields” on the Article row.

2. Click on “Add field” and select Content under Reference and add Related as the Label then click on “Save and continue”.

3. Select Unlimited under “Allowed number of values” and click on “Save field settings”.

4. From the “Reference type” section, select Article and “Basic page” from “Content type”.

Test Entity Reference Field

Go to the Article form and search for content in the Related field. You should see items being returned.

In the example above I have two article starting with “How to Build”. You can see that both are being returned.

Let’s modify the returned results to display not just title, but content type and created date.

It’ll return the following:

Title - content type - date

Customize Autocomplete using Views

To customize the autocomplete we’ll need a View.

1. Go to Structure, Views and click on “Add view”.

2. Add “Related autocomplete” as the View name (this can be anything).

From the “View settings” section select the correct entity type from the Show drop-down.

In this example we’re using referencing other content types, such as pages and articles, so we’ll leave Content selected.

But if you’re referencing taxonomy terms, then you’ll need to select “Taxonomy terms” from the Show drop-down.

Then click on “Save and edit”.

3. Click on Add in the Displays section and click on “Entity Reference”.

4. Click on Settings in the Format area and check “Content: title”.

If you don’t make the above change you’ll see this error:

5. Click “Add” in the fields section and search for “Content type”.

6. Click on Add again and this time search for “Authored on”.

7. Select “HTML Date Format” from “Date format”.

Note: You can configure the date anyway you want.

8. In the Preview section, you should see something like this:

Spacing Between Fields

In the above image you will see that the fields a separated by a dash (-) but there’s no space between them. It’s a good idea to add a space at the beginning and end of the dash so it’s readable.

To do this, click Settings on the Show row in Format.

Add a space before and after the dash in the separator field.

Now the fields should be spaced out nicely.

Configure Entity Reference to use Views

Creating the view is the first step; you need to configure the entity reference field to use the new view.

Go edit the entity reference field.

1. Go to Structure, “Content types” and click on “Manage fields” on the Article row.

2. Edit the Related field.

3. From the “Reference method” drop-down select “Views: Filter by an entity reference view”.

4. Then from “View used to select the entities”, select the display we created.

Note: If you can’t see your display then make sure you’ve created an “Entity Reference” display in your view.

Then click on “Save settings”.

Test new Autocomplete Results

Now when you search for content in the entity reference field you should see the title, content type and created date.

Summary

Entity reference fields are powerful but become difficult to use if you have a lot of content with similar titles. By using the Views module, you can customize the autocomplete results to whatever is required, and this will help your editors on your Drupal site.