Hide entity ID on autocomplete field widget in Drupal 8

Since you are reading this post you already aware that Drupal autocomplete field widget is showing entity ID (reference ID) along with the entity reference label. It has been like this since I remember using Drupal for the first time (Drupal 6). Usually taxonomy terms are the ones that we use for keywords, categories, etc. Some users find showing ID in brackets annoying. One of them was my latest client, this is where motivation is coming from.

How to hide/remove reference ID?

We have several options available to hide entity ID from the autocomplete label 

• configure the widget to use your custom view,
• several modules
• and Javascript.

If you want to read more, there is already opened a discussion about this topic on the Drupal.org: https://www.drupal.org/project/drupal/issues/2881892

Solution using Javascript

Looking at different solutions in Javascript, I did not find any "simple & slim" working example for this issue, more or less partially implemented snippets. This is where I decided to share my code as a snippet, so you don't have to waste your time as I did.

What does this code snippet do?

First of all, this code will be applied on all autocomplete field widgets. Code will replace autocomplete select callback handler to return labels without reference ID as well as remove then when autocomplete field initilizes.

Here is the end result which improves the required user experience.

(function ($, Drupal) {

  'use strict';

  /**
   * Remove entity reference ID from "entity_autocomplete" field.
   *
   * @type {{attach: Drupal.behaviors.autocompleteReferenceEntityId.attach}}
   */
  Drupal.behaviors.autocompleteReferenceEntityId = {
    attach: function (context) {
      // Remove reference IDs for autocomplete elements on init.
      $('.form-autocomplete', context).once('replaceReferenceIdOnInit').each(function () {
        let splitValues = (this.value && this.value !== 'false') ?
          Drupal.autocomplete.splitValues(this.value) : [];

        if (splitValues.length > 0) {
          let labelValues = [];
          for (let i in splitValues) {
            let value = splitValues[i].trim();
            let entityIdMatch = value.match(/\s*\((.*?)\)$/);
            if (entityIdMatch) {
              labelValues[i] = value.replace(entityIdMatch[0], '');
            }
          }

          if (labelValues.length > 0) {
            $(this).data('real-value', splitValues.join(', '));
            this.value = labelValues.join(', ');
          }
        }
      });
    }
  };

  let autocomplete = Drupal.autocomplete.options;
  autocomplete.originalValues = [];
  autocomplete.labelValues = [];

  /**
   * Add custom select handler.
   */
  autocomplete.select = function (event, ui) {
    autocomplete.labelValues = Drupal.autocomplete.splitValues(event.target.value);
    autocomplete.labelValues.pop();
    autocomplete.labelValues.push(ui.item.label);
    autocomplete.originalValues.push(ui.item.value);

    $(event.target).data('real-value', autocomplete.originalValues.join(', '));
    event.target.value = autocomplete.labelValues.join(', ');

    return false;
  }

})(jQuery, Drupal);

Hope your autocomplete field just got more user friedly :)