Convention for max visible results?

[archonic]

First issue 🎉 ! Hopefully the issues feature wasn't turned on by mistake.

I've implemented this and it's working very well, but I'm wondering if there could be a convention for limiting the number of visible results. If you have 100 items you're filtering on, displaying all those items makes for poor usability.

You could limit visible items with something like this SCSS:

.select-menu-list {
  .select-menu-item { display: none; }
  .select-menu-item:nth-child(-n+6) { display: block; }
}

However, this doesn't mesh with the hidden attribute that filter-input-element.js toggles.

[keithamus]

Hey @archonic thanks for the issue, and grats on getting there first 🏅

Hiding items past a certain number does make sense as a feature. On GitHub we tend to use filter-input for filtering small, bounded lists such as the License Picker. For anything over 100 items, it's probably unbounded, and so we tend to combine it with remote-input-element which lets us control not only the filtering but also sort order on the server, meaning we can put more accurate results at the top of the list.

If you wanted to add a limit today, you could do so with the custom .filter function, then add a counter which prevents matching anything past 100 items, and gets reset when the filtering begins:

const fuzzyFilterInput = document.querySelector('.js-fuzzy-filter-input')
let counter = 0
// Reset the counter when filtering is about to take place
fuzzyFilterInput.on('filter-input-start', () => { counter = 0 })

fuzzyFilterInput.filter = (element, itemText, query) => {
  // Match the first 100 items but stop matching after that.
  const match = counter < 100 && itemText.toLowerCase().includes(query.toLowerCase())
  counter += 1
  return {
    match,
    hideNew: itemText === query
  }
}

So, as for implementing this feature? Well I don't think we should for the following reasons:

1. We think filter-input should be for smaller lists of <100 items. Use remote-input or similar for larger lists, so you can better control ordering of what sits at the top.
2. Adding a limit encourages the use of filter-input for larger lists, which we'd like to avoid.
3. Adding a limit is achievable today, using the existing API.
4. If we added a limit, it would require new configuration options/APIs which we'd like to avoid as much as possible.

Let me know your thoughts on this though! I'm going to close the issue but we can continue the conversation, and if you have any other ideas for improvements we're always happy to hear them! ✌️

[archonic]

Thanks for the very comprehensive reply.

We think filter-input should be for smaller lists of <100 items. Use remote-input or similar for larger lists, so you can better control ordering of what sits at the top.

Makes sense, I didn't know remote-input existed, I'll check it out. When the list is server rendered, I didn't think sorting was a challenge with filter-input.

Thanks again!