qooxdoo “chips” UI component

If you’ve ever used a tagging interface in a web application, you’re probably familiar with the “chip” interface. Examples abound (AngularJS Material, Materialize, and the tags on StackOverflow, to name a few).

We wanted to use chips in a qooxdoo application, so we had to roll our own component.

There are lots of other features I could imagine adding:

  • more configurability for the chips’ appearance, including changing background color, radius, and the “delete” button image
  • removing the delete buttons from the chips
  • better control over the position of the input cursor and width of the suggestions dropdown
  • more interesting developer-specified filtering of the suggestions list
  • better keyboard control — backspace to delete chips, arrow keys to move between the chips and insert text

But I think there’s enough here to make it worth sharing.

Paste this code into the qooxdoo playground.

Join the Conversation

1 Comment

  1. Great AutoVirtualComboBox.

    I have discovered a small bug on line 152 within the AutoVirtualComboBox class

    if e.getData() is null then trim() will fail

Leave a comment

Your email address will not be published. Required fields are marked *