react-searchable-input v2.7.0

react-searchable-input

A react based text input with search/select/multi-select build in

example usage

import SearchableInput from 'react-searchable-input';

const handleSelect = (valueArr) => {
  // do something with the selected items array (the returned value is alway an array even we have only one item selected)
}

const handleSearch = (value) => {
  // do something with the input search value
  // EX: perfect place to ajax fetch
}

//what ever you like, just don't forget the `key`
//for validated html structure, better use span as wrapper element
const renderListItem = (item) => (
  <span key={item.id}>
    <img src={item.img} alt={item.label} />
    <span>{`${item.id} = ${item.label}`}</span>
  </span>
)

const someComponent = ({ collection }) => (
  <wrapper>
    <SearchableInput
      name='sample'
      onListItemClick={handleSelect}
      asyncSearch={handleSearch}
      collection={collection.map(col => ({...col, id: col.id, label: col.name}))}
      placeholder='search for something'
      theme={{
        disabledColor: "#DDDDDD",
        inputHeight: '34px',
        listMaxHeight: "500px",
        listPadding: '20px',
        listWidth: '100%',
        listTop: '30px',
        listLeft: '0px',
        listBg: 'transparent'
      }}
      renderListItem={renderListItem}
    />
  </wrapper>
)

Props:

TODO:

• SSR support (ClickOutside component)
• Better cache strategy (attach unique id to a given request to associate response)
• More customization options for elements (multi-selections, etc)
• TypeScript