3

Hide the term id on autocomplete widget

How can I hide the term id on autocomplete widget ?

I use drupal 8.

3

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 | |
2

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 | |
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 | |
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

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 | |
0

The code work well for single term in autocomplete. But if there are more than one terms, then only the first term is shown hiding the other terms as in Autocomplete (tags) widget. I have made a`slight change in the regex of the code.

    (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 | |
  • Welcome to Drupal Answers! Thanks for your answer, but we have no idea what above code you're referencing. Answers are reordered on a question based on votes so it's no guarantee that "the above code" will remain above your answer. You can quote "the above code" here, link to the comment, or mention the user who posted the answer. To be honest, all of the above would probably be best. "The following code in @Akash Daimari's answer works well.." – sonfd Aug 5 at 13:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.