4

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

Improve this question

8 Answers 8

Reset to default
2

There is no built-in option to hide term ID from entity_autocomple form element. Its behavior is simple, if there is a term that match then shows (TID).

Improve this answer
1

For Drupal 8 I would adjust your code a bit to remove the number after selecting the suggested value, not after user click outside the input:

    jQuery("body").find('.form-autocomplete').on('autocompleteclose', function(event, node) {
  var val = jQuery(this).val();
  var match = val.match(/\((.*?)\)$/);
  if (match) {
    jQuery(this).data('real-value', val);
    jQuery(this).val(val.replace(' ' + match[0], ''));
  }
});
Improve this answer
1

I have done small changes in code and working fine for me. thank's

(function($, Drupal, drupalSettings){
  'use strict';

  Drupal.behaviors.common = {
    attach: function(context) {
      // Remove TID's onload.
      Drupal.common.remove_tid();

      // Remove TID's onchange.
      jQuery('body').find('.form-autocomplete').on('autocompleteclose', function() {
        Drupal.common.remove_tid();
      });
    }
  };

  Drupal.common = {
    remove_tid: function () {
      var field_autocomplete = jQuery('body').find('.form-autocomplete');
      field_autocomplete.each(function (event, node) {
        var val = $(this).val();
        var match = val.match(/\((.*?)\)$/);
        if (match) {
          $(this).data('real-value', val);
          $(this).val(val.replace(' ' + match[0], ''));
        }
      });

    }
  };
})(jQuery, Drupal, drupalSettings);
Improve this answer
1

Here is the trick to hide Reference EntityID using Javascript/jQuery.
This is not a proper way to hide it, but it works.

jQuery("body").find('.form-autocomplete').change(function() {
            var val = jQuery(this).val();
            var match = val.match(/\((.*?)\)$/);
            if (match) {
                jQuery(this).data('real-value', val);
                jQuery(this).val(val.replace(' ' + match[0], ''));
            }
        });
Improve this answer
0

Similar to other jQuery-related answers, you could add an function and call it for each form field or an entire form:

    function autocomplete_tid_remove(field){

        var autocomplete_tid = $(field);

        var autocomplete_tid_stripped = $(autocomplete_tid).val().split(" ")[0];    

        $(field).val(autocomplete_tid_stripped);    

    }

    var selector = "[**put form id here**]";

    autocomplete_tid_remove(selector + " .form-autocomplete");
Improve this answer
0

Here is a complete js file for removing TID's onload and onchange

(function($, Drupal, drupalSettings){
'use strict';

 Drupal.behaviors.my_module = {
   attach: function(context) {

  // Remove TID's onload.
  Drupal.my_module.remove_tid();

  // Remove TID's onchange.
  jQuery('body').find('.form-autocomplete').on('autocompleteclose', function() {
    Drupal.my_module.remove_tid();
  });
}
};

Drupal.my_module = {
  remove_tid: function () {
    let field_autocomplete = jQuery('body').find('.form-autocomplete');
    let autocomplete_tid_stripped = field_autocomplete.val().split(' ')[0];
    field_autocomplete.val(autocomplete_tid_stripped);
  },
};

})(jQuery, Drupal, drupalSettings);
Improve this answer
0

In full JS :

(Drupal => {
  Drupal.behaviors.autocompleteRemoveTid = {
    attach: context => {
      // Remove TID's onload.
      Drupal.autocompleteRemoveTid.removeTid(context);

      // Remove TID's onchange.
      context.querySelectorAll(".form-autocomplete").forEach(element => {
        element.addEventListener("change", () => {
          Drupal.autocompleteRemoveTid.removeTid(context);
        });
      })
    }
  };

  Drupal.autocompleteRemoveTid = {
    removeTid: context => {
      context.querySelectorAll(".form-autocomplete").forEach(element => {
        let val = element.value;
        const match = val.match(/\(([0-9]+)\)$/);
        if (match) {
          element.value = val.replace(" " + match[0], "");
        }
      });
    }
  };
})(Drupal);
Improve this answer
0

For more than a taxonomy term, I made a slight change in the code shown by another answer.

(function ($, Drupal, drupalSettings) {
  'use strict';

  Drupal.behaviors.common = {
    attach: function(context) {
      // Remove TID's onload.
      Drupal.common.remove_tid();

      // Remove TID's onchange.
      jQuery('body').find('.form-autocomplete').on('autocompleteclose', function() {
        Drupal.common.remove_tid();
      });
    }
  };

  Drupal.common = {
    remove_tid: function () {
      var field_autocomplete = jQuery('body').find('.form-autocomplete');
      field_autocomplete.each(function (event, node) {
        var val = $(this).val();
        var match = val.match(/\s\(.*?\)/g);
        if (match) {
          $(this).data('real-value', val);
          $(this).val(val.replace(/\s\(.*?\)/g, '' ));
        }
      });
    }
  };
})(jQuery, Drupal, drupalSettings);
Improve this answer
0