react-search is a simple search autocomplete component using react.js.
npm install react-search --save
items as an array
import Search from 'react-search'
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
let ITEMS = ['ruby', 'javascript', 'lua', 'go', 'julia', 'c', 'scala','haskell']
ReactDOM.render(<Search items={ITEMS}/>, document.getElementById('root'));items as an array of objects
import Search from 'react-search'
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
let ITEMS = [
{ title: 'javascript', description: 'an awesome language' },
{ title: 'ruby', description: 'a cool language' },
{ title: 'haskell', description: 'a functional language' }
]
let KEYS = ['title', 'description']
let KEY = 'title' /* search by title */
ReactDOM.render(<Search 'Search for a programming language'
items={ITEMS}
keys={KEYS}
searchKey={KEY} />,
document.getElementById('root')
);Uses React ^0.13.0
Uses React ^0.14.0
List of Items to filter through, either an array of strings or objects.
Keys to display, if using an array of objects.
The search key to match when searhching, if using an array of objects.
default: react-search
Optional class prefix for included class names. Will be attached to the main wrapper element.
placeholder attribute for the text input
Update handler for the text input. Fired before the internal logic to update the autocomplete list. Callback value passed back is the SyntheticKeyboardEvent, which you can use to get the target or value.
Click handler for each item in the autocomplete list. Fired before the internal logic to hide the autocomplete list. Callback value passed back is the SyntheticKeyboardEvent, which you can use to get the target or value.
default: 'a'
Custom element to use for each <li> in the autocomplete list. Can be a React Element or a valid DOM tag as a string, such as <CustomElement> or 'div'
react-search can be used with your own custom styles. A minimal search.css style sheet is included in the example as a guide. The styles follow BEM naming conventions.
npm install
npm run build
npm test
npm start