I would like to create a searchable multi select box in observablehq
that would not consume too much space when, for example, 50+ values are selected (in my usecase, all values are selected by default). I am aware that some custom searchable multi select options exist for observablehq
such as this one and this table based multiselect, but the first one takes up too much space when a lot of values are selected. The table based one does not work for me because the search box overrides what has been (un)selected in the table. An example of what I am after would be on this page. In addition to what I have described above (searchable multi select that neatly handles a lot of selections), they also have the (un)select all options, and option groups, which are really cool features that I do not need right now, but feel like they can be handy. I tried to use a regular JavaScript
solution, but it does not seem to be working in observablehq
, possibly because I try to manipulate the DOM. Here is a jsfiddle.
It now seems to be possible thanks to the wonderful John's Search Checkbox.