autocomplete-example.js

// with static data, do filtering and sorting in the client
<Autocomplete
  initialValue="Ma"
  items={getUnitedStates()}
  getItemValue={(item) => item.name}
  shouldItemRender={(item, value) => (
    state.name.toLowerCase().indexOf(value.toLowerCase()) !== -1 ||
    state.abbr.toLowerCase().indexOf(value.toLowerCase()) !== -1
  )}
  sortItems={(a, b, value) => (
    a.name.toLowerCase().indexOf(value.toLowerCase()) >
    b.name.toLowerCase().indexOf(value.toLowerCase()) ? 1 : -1
  )}
  renderItem={(item, isHighlighted) => (
    <div
      style={isHighlighted ? styles.highlightedOption : styles.option}
      key={item.abbr}
    >{item.name}</div>
  )}
  renderEmpty={(value) => (
    <div style={{padding: 10}}>No matches for {value}</div>
  )}
/>

// or from server data that does sorting/filtering already and we just dump it all in
<Autocomplete
  items={this.state.dynamicItems}
  getItemValue={(item) => item.name}
  onChange={(value) => {
    makeRequest(value, (items) => {
      this.setState({ dynamicItems: items })
    })
  }}
  renderItem={(item, isHighlighted) => (
    <div
      style={isHighlighted ? styles.highlightedOption : styles.option}
      key={item.abbr}
    >{item.name}</div>
  )}
  renderEmpty={(value) => (
    <div style={{padding: 10}}>No matches for {value}</div>
  )}
/>

L33t

Is this coming to react-autocomplete?