Simple lightweight search suggestion component. This component was inspired by downshift (paypal) component.
The component applied Function as Child Components
pattern. You can read more
about this pattern
here
npm install --save search-suggestion
or
yarn add search-suggestion
You can check out the basic demo here: https://codesandbox.io/s/n45j5zjwyj
import React, { Component } from 'react';
import { render } from 'react-dom';
import Suggestion from 'search-suggestion';
const items = ['apple', 'pear', 'orange', 'grape', 'banana'];
class App extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: []
};
}
handleChange = e => {
const value = e.target.value;
let dataSource = [];
if (value) {
dataSource = items.filter(item => item.toLowerCase().includes(value.toLowerCase()));
}
this.setState({
dataSource
});
};
render() {
return (
<Suggestion
getDisplayName={item => item}
items={this.state.dataSource}
onSelectedItem={item => alert(item)}
>
{({
getInputProps,
getListItemProps,
getItemProps,
inputValue,
selectedItem,
highlightedIndex,
items,
isOpen,
clearInputValue
}) => (
<div>
<p>selected item: {selectedItem}</p>
<input
{...getInputProps({
placeholder: 'Select fruit',
onChange: this.handleChange
})}
/>
{isOpen && (
<div {...getListItemProps()}>
{items.map((item, index) => (
<div
{...getItemProps({ item, index })}
key={item.code}
style={{
backgroundColor:
highlightedIndex === index
? 'rgb(232, 232, 232)'
: 'white',
fontWeight:
selectedItem && selectedItem === item
? 'bold'
: 'normal'
}}
>
{item}
</div>
))}
</div>
)}
</div>
)}
</Suggestion>
);
}
}
render(<App />, document.getElementById('root'));
Array
| default is an empty array
Use as a datasource to render list result.
function(item: any)
=> return a text
Use to display text content of selected item.
function(item: any)
Use to set new selected item value and extend the actions based on that selected item.
function({})
Returns the props you should apply to the input
element that you render.
function({})
Returns the props you should apply to the list item element that you render.
function({})
Returns the props you should apply to any menu item elements you render.
function()
Clear current value in input
element
string
The current value of input
element
int
The current index of highlighted item
array
The current data of menu
boolean
The menu open state
The value of selected item
Websites built with Search Suggestion component
If you don’t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. Some of the more popular and actively maintained ones are: