reactjs / react-autocomplete

WAI-ARIA compliant React autocomplete (combobox) component
MIT License
2.17k stars 532 forks source link

Limit items show in the menu #374

Open jmarcosvillar opened 5 years ago

jmarcosvillar commented 5 years ago

Actually, I am using a +900 list, but I only want to show 10 records on the menu. But when I try to scroll down with a modified children list on renderMenu, it crash.

ilya-section4 commented 5 years ago

+1 would like to see this feature

FedeG commented 5 years ago

@jmarcosvillar @ilya-section4 work-arround/solution:

class LimitedAutocomplete extends Autocomplete {
  getFilteredItems(props) {
    let items = props.items

    if (props.shouldItemRender) {
      items = items.filter((item) => (
        props.shouldItemRender(item, props.value)
      ))
    }

    if (props.sortItems) {
      items.sort((a, b) => (
        props.sortItems(a, b, props.value)
      ))
    }

    return items.slice(0, props.limitItemsLength);
  }
}

Or

class LimitedAutocomplete extends Autocomplete {
  getFilteredItems(props) {
    const items = Autocomplete.prototype.getFilteredItems.call(this, props);
    return items.slice(0, props.limitItemsLength);
  }
}