observablehq

Is it possible to create a searchable multi select box in observablehq?


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.


Solution

  • It now seems to be possible thanks to the wonderful John's Search Checkbox.

    enter image description here