LeaVerou / awesomplete

Ultra lightweight, usable, beautiful autocomplete with zero dependencies.
http://leaverou.github.io/awesomplete/
MIT License
6.95k stars 609 forks source link

Handling long lists #17233

Open bcbock opened 3 years ago

bcbock commented 3 years ago

I am using awesomplete in a tool I built to list assets to pick. But the problem is the list is so long that it runs off the page. Even when you filter, there are enough items starting with the same letters to run off the page. I was wondering if it’s possible to have the results of a long list show in columns.

bbenjamin commented 3 years ago

This isn't really something that can be handled with Awesomplete itself, but you could probably get there with CSS, setting the list max-height to something like 80vh so it's guaranteed to not be taller than than the screen. You could then use css columns, although you'd probably want to have a different number of columns based on viewport width and number of results (if you only have 4 results, it may be odd for each to be in a different column). It may be easier to set the results overflow-y: scroll, so you can scroll within the long list of results.