autosearch

React AutoSearch

A modern approach to an auto complete component for ReactJs

import React from 'react'

function App () {
  let list = [ { name: 'Foo' }, { name: 'Far' }, { name: 'Faz' } ]
  let options = { propKey: 'name' }

  return (
    <AutoSearch
      list={list}
      options={options}
      onSelect={ value => val = value }
    />
  )
}

Install

npm

npm install --save autosearch

Contribution

Do you like what we made? Support it by donating, creating an issue or pull request.

Try it out on CodeSandbox

API

Props

list: Array

Value: Array<{ [prop: string]: string } | string>

Type: Array<String>: no action required in AutoSearchOptions

Type: Array<Object>: specify propKey value in AutoSearchOptions

• The list used for the AutoSearch algorithms

onChange: Function (optional)

Default: () => {}

Arguments: value: String

• Invoked when the user changes the input value.

onNavigate: Function (optional)

Default: () => {}

Arguments: results: Array<T>, active: Number

• Invoked when keyboard listeners react to user navigation of results list.

onSelect: Function (optional)

Default: () => {}

Arguments: value: String, results: Array<T>

• Invoked when the user selects an item from the results list.

options: AutoSearchOptions (optional)

Default: Object<AutoSeachOptions>

Value: Object

• Used throughout AutoSearch as conditional options and values

Options (optional)

propKey: String (optional)

Default: 'item'

• Used to find the iteration value by the AutoSearch algorithms

primaryColor: String (optional)

Default: 'steelblue'

• Used as the primary color for active result indication

placeholder: String (optional)

Default: 'AutoSearch'

• Attribute applied to the root input placeholder value

autoFocus: Boolean (optional)

Default: false

• Attribute applied to the root input autoFocus value

caseSensitive: Boolean (optional)

Default: false

• Used in the AutoSearch algorithms to match search value

maxResults: Number (optional)

Default: 10

• Max number of results to render in the results list

showIcon: Boolean (optional)

Default: true

• Used to determine if the search icon is rendered in the input

Patch notes

A log of recent updates and notes can be found here

Roadmap

The future plans are under deliberation within the core team.

License

This project is licensed under the terms of the MIT license