Drupal 7 entityreference autocomplete: Improve the ENTER keydown behaviour (select first on enter)

I created this issue and snippet as better entityreference.module autocomplete widget usability solution in: ‎


Today I'd like to discuss a problem that lead to usability problems in several Drupal 7 projects already (and this is why I'm categorizing this as 'Bug report' and not as 'Feature request').

The autocomplete widget is nice, but additionally to other usability problems which already have their own issues, the ENTER keydown behaviour is not very nice and hard to understand for normal users.

How to reproduce the usability problem:

Enter a value (in my case from an entity reference views results filter) into the ER autocomplete field, e.g. "401"
When the select list appears do NOT click on a value and do NOT click arrow down but press ENTER directly. A user would do this if he entered a value that is exactly the same as in the list, e.g. "401"
Now the value "401" seems to be selected correctly but it is not, because the ID part is missing ("401 (123)")
Form validation fails and other fields (in my case from entityreference_autofill) don't work correctly.

A clever workaround?

One of the long-term reasons for this problems is, that the ID in the brackets is required, so that entering the same value as the correct result is not enough.
But hey, the first value is in most cases exactly what the user was searching for. So why don't we simply select the first result value on enter click, if there is at least one matching entry (or perhaps EXACTLY one?)

In our usability tests this improved the understanding a lot. And if the user presses enter before there are selectable results we trigger an alert.

The key point is: This all is possible with the current implementation of entityreference autocomplete widget without any further technical problems or drawbacks.

Perhaps one day the entityreference autocomplete might become better at all but until this we should have a look how we can improve usability.

Here's my JS implementation that can be added by a custom module in hook_init or could be directly patched into entityreference if we can get enough positive feedback!

  1. /**
  2.  * Implements hook_init.
  3.  */
  4. function MY_MODULE_init() {
  5.   drupal_add_js("(function ($) {
  6.  'use strict';
  7.  Drupal.behaviors.ACChangeEnterBehavior = {
  8.    attach: function (context, settings) {
  9.      $('input.form-autocomplete', context).once('ac-change-enter-behavior', function() {
  10.      $(this).keypress(function(e) {
  11.        var ac = $('#autocomplete');
  12.        if (e.keyCode == 13 && typeof ac[0] != 'undefined') {
  13.          e.preventDefault();
  14.          ac.each(function () {
  15.              if(this.owner.selected == false){
  16.                       this.owner.selectDown();
  17.                     }
  18.              this.owner.hidePopup();
  19.          });
  20.          $(this).trigger('change');
  21.        }
  22.      });
  23.    });
  24.    }
  25.  };}(jQuery));", array('type' => 'inline'));
  26. }

Note: The idea is based on this discussion: http://drupal.stackexchange.com/questions/87439/drupal-7-disable-submit-...

Kommentare

Kommentar hinzufügen

Der Inhalt dieses Feldes wird nicht öffentlich zugänglich angezeigt.

Weitere Informationen über Formatierungsoptionen