How can I hide the entity ID on an autocomplete widget?

Question

I have an autocomplete widget for a taxonomy entity reference.

Every term shows its entity ID between parentheses; plus, if the term name contains spaces, it appears between quotes, e.g. "Lorem ipsum (125)".

How do I remove the entity ID and the quotes?

Answer 1

You should have a look on Chosen module.

Chosen uses the Chosen jQuery plugin to make your elements more user-friendly.

Follow this steps:

1. Install, enable and configure the Chosen module.
2. Change the widget type of your field to "Select list" at Manage Form Display of your content type
3. Check "apply chosen on this field" at Manage Fields > Edit of your field

Answer 2

Here is an example for Drupal 8, Javascript only solution without the need to install any additional modules - full article can be found here: Hide entity ID on autocomplete field widget in Drupal 8

 (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);

Answer 3

In addition to the comment of f0ns, you can also use a Entity Reference view display to define the fields you want to search on and how they're displayed. You can use this view as an input for your autocomplete widget.