My web application has a half dozen fields where the user is allowed to select from a list of existing values – or enter a new one.
Initially, I included an option called "Other…". When chosen, a new field would slide in, allowing the user to enter a new value. That worked ok with one field, though it felt a little clunky. Now I want to use the same technique for 6 fields, and it's getting harder to manage all the extra "Other…" fields, plus all the extra programming for managing the Other Values.
For a while now, I've been using the Koenpunt fork of the Chosen library, which allows the user to enter new values in the same field. That works ok in general. But recently, I've wanted to add some validation – either via the HTML5
required attribute, or the jQuery Validation library. Since Chosen hides the original SELECT field, the error messages either don't show up, or show up in the wrong places. I've used some of the workarounds, but I feel like I'm applying patches to patches to patches. You can see both the Other… and the Chosen methods in action in my test app: http://chosen-modality.herokuapp.com/
It seems like this pattern isn't all that strange, but I haven't seen any examples in other apps – and I've been keeping an eye out for over a year. Any ideas on a good way to handle this select-or-add capability?