Drupal 8 – How to hide entity ID (reference ID ) in autocomplete widget

When using autocomplete widget, Drupal appends the reference ID in brackets after the entity/taxonomy term as shown in the diagram below.

Drupal uses the reference ID to uniquely identify each entity or taxonomy term. However, this can be confusing to the end user.

There are a number of modules such as select2 which can help you to solve the problem, however, there may be cases where none of the modules can help you to fix the problem.

In this post I will be showing you how to hide the reference ID using Javascript (jQuery).  Let’s now dive in. 🙂

Create a JS library inside your “js” folder, you can create it inside your custom module or theme. For my case I created it inside a custom module. I called mine “reference_number_trimmer.js”, copy and paste the code snippet below into your JS file that you created.

(function ($, Drupal) {
    // Initiate the Drupal autocomplete made in core/misc/autocomplete.js
    var autocomplete = Drupal.autocomplete;

    var selectedItemsWithRefId = [];
    var selectedItemsWithoutRefIds = [];
    /**
     * Handles an autocomplete select event.
     */
    function selectHandlerCustom(event, ui) {
      selectedItemsWithoutRefIds = autocomplete.splitValues(event.target.value);
      selectedItemsWithoutRefIds.pop();

      /**
       * ui.item.label -> contains the item name without the reference id
       * ui.item.value -> contains the item name with the reference id
       */
      selectedItemsWithoutRefIds.push(ui.item.label);
      selectedItemsWithRefId.push({ label: ui.item.label, value: ui.item.value });

      /* change the value of autoselect widget to display the selectedItemsWithoutRefsIds */
      event.target.value = selectedItemsWithoutRefIds.join(', ');
      return false;
    }

    // Override the select handler initiated in core/misc/autocomplete.js
    Drupal.autocomplete.options.select = selectHandlerCustom;

    /*
    * Before submitting the form, we replace the autocomplete widget values with items that contain reference id
    */
    $("#FORM_ID").submit(function() {
        // we filter out those items that the user may have removed
      var selectedItems = selectedItemsWithRefId
        .filter(function(item){
          return selectedItemsWithoutRefIds.includes(item.label);
      }) .map(function(item){
        return item.value
        });

      if(selectedItemsWithRefId.length) {
        $("#WIDGET_FIELD_ID").val(selectedItemsWithRefId.join(","))
      }
    })

  })(jQuery, Drupal);

Let me explain what our code is doing. “Drupal” object has a property called “autocomplete” which can be used to change the way autocomplete widget works. In this solution we override the “select” method that is called when the user selects an item in the autocomplete widget.     Define the JS library inside the library file as shown below:

reference_number_trimmer:
  version: 1.0
  js:
    js/reference_number_trimmer.js : {}
  dependencies:
    - core/jquery

Attach the JS library created above to the form. Since I created mine inside the module, I used
“hook_form_BASE_FORM_ID_alter” hook to attach my library as shown in the code below

<?php
/**
 * Implements hook_form_BASE_FORM_ID_alter().
 */
function drupal8_misc_form_node_profile_form_alter(&$form, $form_state, $form_id) {
  $form['#attached']['library'][] = 'drupal8_misc/reference_number_trimmer';
}

Thats  it , just don’t forget to drush cr 🙂   I hope you found this blog helpful and please feel free to share any ideas or better ways of doing this with me.