Skip to content

Created:

Last modified:

Filter/category adder

I was building out a blog backend and I wanted to make an input field for categories and tags. This input field needed to show the separation between items inputted so they didn't just appear to be strings, and I wanted to add the ability to remove specific added items. This type of interface is very common, I know, however I wanted to build my own so I knew how it would work and have control over all aspects.

The first attempt

Initially I'd made it just two text input fields, one to type the category, and another which would be hidden to capture all entered strings. When a comma was detected, the text would be copied from the input and appended it to a list, which would be visually to the left of the input field. This string would then be appended to any string already in the hidden text input, as this was to be the input field submitted with the form. As you might guess, this was messy.

As this was for a form submission I soon realised that I would be far better off creating checkboxes for each string, as then the whole group of checkbox values could be submitted as an array. Previously I was going to transmute the string after submission. So just making more work for myself.

I feel like I should add, just for my own ego, this first attempt/mess happened within, I'm not sure, maybe half an hour after 5pm on a Friday. That's my excuse anyway.

Oh, oh! And trying to delete an added category/tag from the list meant a string search, which also ended in deleting all if there were duplicates. Basically it was a mess. But it was a start.

The second attempt

Now I've realised some errors, and realised a better approach -- being the checkboxes stroke of pure genious (yes, I'm being dramatic, yes I'm currently drinking a giant mug of coffee, which may be enhancing this).

My second attempt detects the ,, cuts the previous string from the input field, creates a checkbox with this string, adds an event listener which deletes the checkbox if the checkbox is clicked, and appends the new checkbox to an existing span #input__wrapper.

The nth attempt

As these things go, now I'm on a roll with this interface, the changes become 'tweaks', 'improvements', and 'fixes' rather than attempts.

These improvments included when you hit Backspace in the input field the focus is switched to the last checkbox element, where you can then hit Enter to remove it.

I changed the layout from having the checkboxes appear in front of the input field, to appearing below, and so using Backspace no longer made sense.

After the element is removed the focus is changed back to the input field to allow the user to continue adding more. This is obviously one of those assumptions of how a mainly keyboard user would like the interface to work.

Also added:

  • Example checkbox on page load
  • aria-live response when checkbox is created
  • Error message if item already exists (including aria-live messaging)

I also found as I was using and testing it that I expected the Enter to save a new checkbox for me so I added that as well. This could cause issues on an actual form, so will have to test this out in proper use and update this page in the future.

The magnificent, totally original and cool, input

Separate items with a , or Enter. Click the item to delete or Tab to the one you want removed and press Enter.