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:
ColorSnapper-3
Repeat several times:
ColorSnapper-4

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

Everett Zufelt’s picture

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

bleen18’s picture

Everett, 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?

Everett Zufelt’s picture

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

bleen18’s picture

Everett -

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

Everett Zufelt’s picture

Status:Active» Postponed

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

RobLoach’s picture

We could use jQuery UI Autocomplete, which is already part of Drupal core: #675446: Use jQuery UI Autocomplete.

Dave Reid’s picture

I'd much rather have something that builds off of the jQuery UI Autocomplete rather than duplicating work.

Dave Reid’s picture

Looks like this is going to be added to jQuery UI eventually: http://wiki.jqueryui.com/w/page/12137993/ListBuilder

amrit_b’s picture

I 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

sun’s picture

Status:Postponed» Closed (duplicate)
Issue tags:-#d8ux, -Proudly Found Elsewhere

Marking as duplicate of #675446: Use jQuery UI Autocomplete

druvision’s picture

This is better then jQuery autocomplete since it provides tokenized input (facebook-style) and allows for theming the selection list.