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:

| Name | type | default | description |----------|:-------------:|------:|---------:| | collection | array | | The only required props, can be an array of string, or an array of object. In later case, each object should contain minimum an id and a label| | placeholder | string | "Choose an item" | placeholder text for input field | | isDisabled | boolean | false | disable the search input all together | | onListItemClick | function | | a callback function takes an array of the current selected items as argument, to trigger further actions | | asyncSearch | function | | a callback function to trigger ajax search when current input changed| | enableCache | boolean | false | allow local cache for search result, useful when you have ayncSearch but don't use advanced async flow control solution like rx.js or redux-saga, it will throttle onChange event to prevent fetch on every keystroke, and cache a maximum of 10 queries results to be retrieved directly instead of calling the server again | | showLabelText | boolean | false | Label Text is a text overlay after you selected some items in search result, without modifying the underlying search input. It would display n selected for multi selection (where n is the number of items selected), or the label of item for single selection | | multi | boolean | false | enable multiple item selection, turn the result list to checkbox items | | closeOnSelect | boolean | true | control if the search list should be hidden after selected an item, always false for multi-selection | | enableSelectAll | boolean | false | used when active multi option, add an option on top of search list, to select/deselect all avaiable items on the list | | selectAll | object | {selectAllText: "Select all",unSelectAllText: "Unselect all"} | text to display for select/deselect all when enableSelectAll is true | theme | object | {disabledColor:"#DDDDDD",inputHeight: "34px",listMaxHeight: "500px",listPadding: "20px",listWidth: "100%",listTop: "40px",listLeft: "0px",listBg: "transparent"} | theme variables allow to custom the appearance of list) | renderListItem | function | | a render function allows to customize the list items, it takes the shape of item inside collection props, and should return a validated DOM node/ react node | | onPressEnter | function | | function to call with current input value when user typed enter key | | onBlur | function | | additional function to call when the whole component lost focus | | onFocus | function | | addtional function when the input field is focused | | showError | boolean | | to display an error message if something went wrong (EX: ajax fetch failed) | | defaultError | string or nodes | "please select a valid label" | if showError is true, display it |

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