observablehq / inputs

Better input elements
https://observablehq.com/framework/lib/inputs
ISC License
125 stars 34 forks source link

Create searchable select menus #207

Closed mkfreeman closed 2 years ago

mkfreeman commented 2 years ago

When a Select menu has many options, scrolling through them is tedious. Creating a searchable option for Inputs.select (e.g., {searchable: true}) would allow users to search through a long list of options, such as U.S. counties. As a reference, see react-select

https://user-images.githubusercontent.com/1373882/147106292-298079ad-84e4-4811-8f70-eafca351da21.mp4

mbostock commented 2 years ago

The native way of doing this is a text input with a datalist option. I don’t think we plan on implementing any non-native inputs in this library (due to complexity).

mkfreeman commented 2 years ago

Noted! Do you think this is a worthwhile functionality to prototype? Looks fairly straightforward.

mbostock commented 2 years ago

It’s already implemented on Inputs.text and Inputs.search. 😄

mkfreeman commented 2 years ago

I see! I didn't know that you could set a datalist on a text input (e.g., here. Exactly what I wanted!