Removing the entity ID from Drupal entity reference fields

On a site I am currently working on I have a content type that includes an entity reference field. When creating a node, the entity reference autocomplete includes the entity id in the field after selecting the entity desired. This can be confusing for the user.
When trying to find a solution to this problem I came across many issues and different proposed solutions including a sandbox module called Entity reference trim.

I tried the entity reference trim module but it has problems when the form was submitted and had errors.
Taking a closer look into this module I could see that it was altering the widget (adding a hidden field) and overriding some of the core Drupal js to do with the autocomplete functionality. While poking around the autocomplete javascript I noticed that the autocomplete fires a 'autocompleteValue' event.
Using this event I could change the entity reference field value and store it, then change it back when the form is submitted.

Below is the code that I am using but be aware that I have not yet tested it extensively and not tested it with multiple entity reference fields. Also, as the event bubbles, a more generic version could probably be coded.

NOTE: you will have to change the jQuery selector.

(function ($) {
  Drupal.behaviors.damnId = {
      attach: function (context, settings){
        // Get the entity reference input
        $eref = $('#edit-field-postcode-suburb-und-0-target-id', context);
        if($eref.val()){
          // If field has value on page load, change it.
          var val = $eref.val();
          var match = val.match(/\((.*?)\)$/);
          $eref.data('real-value', val);
          $eref.val(val.replace(match[0], ''));
        }
        // Listen for the autocompleteSelect event
        $eref.once().on('autocompleteSelect', function(e, node){
          var val = $(node).data('autocompleteValue');
          var match = val.match(/\((.*?)\)$/);
          // Put the value with id into data storage
          $eref.data('real-value', val);
          // Set the value without the id
          $eref.val(val.replace(match[0], ''));
        }).closest('form').submit(function(e){
          // On form submit, set the value back to the stored value with id
          $eref.val($eref.data('real-value'));
        });
      }
  };
})(jQuery);

Comments

very nice

Nice solution, but doesn't work with multi value fields.

Hi Boris, My field was only a single value field so I didn't try with multi value fields. It should still be possible though you would have to listen for an event when a new field is added and then add the listener to the new field.

Any Idea how to do this?

No idea, but I'm probably going to use: https://www.drupal.org/project/chosen_ajax which does this and a little more.

I did actually try chosen_ajax but had problems with it. Can't remember the actual problems I had though.

If I ever have to do it on a multi value field, I will be sure to post the code here :)

If you use a behavior, it will automatically add the listener to every new autocomplete field that your multi value field creates

Drupal.behaviors.myBehavior = {
attach: function (context, settings){

// your code here

}
}

@Feijó
The code I posted uses a drupal behavior.
The code I posted attaches to a textfield with a certain id.
"$eref = $('#edit-field-postcode-suburb-und-0-target-id', context);"

Sorry, my bad. I based on my version of your code that I've been working on, its not 100% yet and it shall cover a half dozen autocomplete fields in my form.

Right now it is working only with the blur event, not so good. I will continue digging and once I have a breakthrough I will comment back here.

You should just need to have the correct jquery selector string.

Add new comment

You must have Javascript enabled to use this form.