Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
The jQuery TokenInput plugin (http://loopj.com/jquery-tokeninput/) seems like an excellent replacement for our current autocomplete fields. I have had to take the time to explaining autocomplete to plenty of my site admins over the last few years and IMO this would be a huge UX improvement.
A couple screenshots:
Start typing:
Repeat several times:
I would love to put a patch together for this, but I want to get some feedback first to make sure others agree that this should, in fact, go into D8 before I spend too much time on it.
Thoughts? Questions? Comments? Concerns? Jokes?
Comments
Comment #1
Everett Zufelt CreditAttribution: Everett Zufelt commentedCan you please:
1. Provide a description of the screen-shots, so that those who cannot see them can better participate in the discussion.
2. Explain why this would be a better solution than jQuery UI autocomplete?
Comment #2
bleen CreditAttribution: bleen commentedEverett, you're absolutely correct - sorry bout that.
The main difference between TokenInput and jQueryUI autocomplete (as well as the traditional Drupal autocomplete) is that as you add terms to the TokenInput autocomplete they are added as individual text objects then include some simple styling to distinguish between multiple items and each one of those text objects has a delete button (usually an "x", but its overridable) so that a user can easily remove a specific text object. It is very similar to the new search tokens that come with OSX Lion or with certain autocomplete fields on facebook.
Traditional Drupal autocomplete & jQueryUI autocomplete both present the user with a simple comma-delimited list once they have added a few terms. In my experience with users it is precisely that reliance on the "comma" that users tend to have a problem with.
There is one current issue with TokenInput that I'm still trying to figure out and that is the ability to add items that are not already in the autocomplete list (think free tagging w/ autocomplete). If this cannot be handled then I will be withdrawing this suggestion but I'm still looking into it.
Thoughts?
Comment #3
Everett Zufelt CreditAttribution: Everett Zufelt commentedHas there been any accessibility work on this component? If there are no role / aria-* attributes in the DOM segment associated with the component the answer is likely no.
Comment #4
bleen CreditAttribution: bleen commentedEverett -
Based on your "role/aria-*" test it does not appear so. The fundamental mechanism by which TokenInput works is by converting what the user types in to a fairly basic unordered list. That said, I'm not really familiar with how various accessibility technologies work with javascript-based interactions. Would you mind taking the demo for a spin at http://loopj.com/jquery-tokeninput/
Obviously if there is no accessibility support that would be a compelling reason to consider something else...
Comment #5
Everett Zufelt CreditAttribution: Everett Zufelt commentedTook a quick look. Doesn't seem to work with screen-readers (tested w/ FF 6.0.2 and JAWS 12).
If you rally some support around this component I am happy to work upstream to assist with answering questions about improving accessibility / implementing WAI-AARIA.
I suggest you post an issue against the component requesting accessibility improvements, in particular WAI-ARIA support (and keyboard only support, if not present). Include a link tho this issue so tat the maintainer can see if interest develops from the Drupal community.
Comment #6
RobLoachWe could use jQuery UI Autocomplete, which is already part of Drupal core: #675446: Use jQuery UI Autocomplete.
Comment #7
Dave ReidI'd much rather have something that builds off of the jQuery UI Autocomplete rather than duplicating work.
Comment #8
Dave ReidLooks like this is going to be added to jQuery UI eventually: http://wiki.jqueryui.com/w/page/12137993/ListBuilder
Comment #9
amrit_b CreditAttribution: amrit_b commentedI wrote a module for Drupal 7 which implements the above plugin - you can check it out at http://drupal.org/sandbox/amrit_b/1420912
Thx
Comment #10
sunMarking as duplicate of #675446: Use jQuery UI Autocomplete
Comment #11
druvision CreditAttribution: druvision commentedThis is better then jQuery autocomplete since it provides tokenized input (facebook-style) and allows for theming the selection list.