Editable, expanding input list control for Bootstrap

Question

We're looking for a certain type of control, preferably with a Bootstrap implementation. We don't believe it's really uncommon, but we might be wrong.

It's essentially a listbox, but also:

• It's like an editable combobox, but without a dropdown.
• Like a tag input/pillbox, but vertical, with a more traditional style, and directly editable.
• Like an expanding grid, but with a single column.
• Like a series of vertically attached text input field boxes, on steroids.
• Like a text area, but properly structured and expanding.

The ultimate goal is to be able to quickly and efficiently input a bunch of values (phone numbers, ...) without leaving the keyboard, while allowing the user to edit or remove existing values painlessly. (The form is relatively large and part of a LOB application.)

1. Does this control have a name?
2. Does anyone know of a Bootstrap plugin that provides such a control?
3. If not, then we're not exactly sure about how to proceed, would you have any pointers for us so that we can implement this in a straightforward way? (Is it a good idea to start with a series of text input fields for example?)

Details:

1. It's essentially a list,
2. It starts as something that looks very much like a simple text input field,
3. When the user presses ENTER, a new row is added below and the cursor is moved to it (the list expands dynamically),
4. When the user presses TAB, the cursor is moved to the next control,
5. (Optional) When the user presses the UP or DOWN arrow key, the cursor jumps in the previous or next element, respectively,
6. Each row is directly editable (the user can click inside any of them and change any character, even in the middle, thus without deleting the element first),
7. (Optional) There can only be one empty row at the end,
8. (Optional) If the user focuses another control (for example by pressing TAB) or another element (for example by using the arrow keys or by clicking), the current element is removed if it's empty,
9. (Optional) In addition to pressing ENTER when the cursor is in the last field, the user can press a button to add a new empty element if the last element is not empty,
10. There is only one column (no need for a column header),
11. (Optional) An inline label should be displayed in the last element if it's empty,
12. There is a button next to each element that allows the user to remove them,
13. (Optional) When the user presses DELETE twice at the end of an element, the focused element is removed (it must be pressed twice so that a user who keeps the button pressed to delete a bunch of characters doesn't remove the element by accident if that wasn't her intention -- this requirement can be formulated in other ways),
14. (Optional) The user can undo a delete operation,
15. (Optional) If the number of elements exceeds a certain limit, a scroll bar appears and the height of the control is fixed at that limit,
16. (NTH) If the number of elements exceeds a second (normally higher) limit, the list is paginated.

Answer 1

As I don't know any control that suits your needs, I'll try to suggest some implementation options:

---

Contenteditable:

Take a look at the contenteditable attribute - demo here.

This won't match all your requirements (point 12 is the main blocker here), but it's pretty nice OOTB, and (according to MDN) cross-browser.

The demo provided above may be a good starting point for your own solution.

---

One input per line:

The other approach will be to use one input for each of the lines. I've provided simple demo that adds "new line" as enter is pressed.

Although this implementation will also need a bit of boxing with keyboard events, this one-element-per-line model seems to better reflect your bussiness needs and is pretty flexible. I'd be afraid about performance with bigger data sets, though.

This can be also mixed with contenteditable approach (e.g. list of editable <li> elements), but it doesn't seem to bring in any benefits. It even brings some problem, because contenteditable won't restrict number of lines by default; with regular input, you have a guarantee that one element contains one line.