https://github.com/chototoss/search-suggestion
🔍 Simple, lightweight, flexible search suggestion, autocomplete component 🔍
https://github.com/chototoss/search-suggestion
autocomplete autoselect combobox function-as-child react suggestions
Last synced: about 1 month ago
JSON representation
🔍 Simple, lightweight, flexible search suggestion, autocomplete component 🔍
- Host: GitHub
- URL: https://github.com/chototoss/search-suggestion
- Owner: ChoTotOSS
- License: mit
- Created: 2017-11-08T11:02:23.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T17:21:17.000Z (over 2 years ago)
- Last Synced: 2025-03-25T13:46:33.124Z (2 months ago)
- Topics: autocomplete, autoselect, combobox, function-as-child, react, suggestions
- Language: JavaScript
- Homepage: https://chototoss.github.io/search-suggestion/
- Size: 1.19 MB
- Stars: 15
- Watchers: 7
- Forks: 2
- Open Issues: 69
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/ChoTotOSS/search-suggestion)
[](https://codecov.io/gh/ChoTotOSS/search-suggestion)
[](https://badge.fury.io/js/search-suggestion)
[](https://github.com/ChoTotOSS/search-suggestion/blob/master/LICENSE)
[](http://makeapullrequest.com)
# Search Suggestion
Simple lightweight search suggestion component. This component was inspired by
[downshift (paypal)](https://github.com/paypal/downshift) component.
The component applied `Function as Child Components` pattern. You can read more
about this pattern
[here](https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9)
## Table content
* [Installation](https://github.com/ChoTotOSS/search-suggestion#installation)
* [Usage](https://github.com/ChoTotOSS/search-suggestion#usage)
* [Examples](https://github.com/ChoTotOSS/search-suggestion#examples)
* [Props](https://github.com/ChoTotOSS/search-suggestion#props)
* [Child callback functions](https://github.com/ChoTotOSS/search-suggestion#child-callback-functions)
* [Actions](https://github.com/ChoTotOSS/search-suggestion#actions)
* [States](https://github.com/ChoTotOSS/search-suggestion#states)
* [Showcase](https://github.com/ChoTotOSS/search-suggestion#showcase)
* [Alternatives](https://github.com/ChoTotOSS/search-suggestion#alternatives)
## Installation
```bash
npm install --save search-suggestion
```
or
```bash
yarn add search-suggestion
```
## Usage
You can check out the basic demo here:
[https://codesandbox.io/s/n45j5zjwyj](https://codesandbox.io/s/n45j5zjwyj)
```js
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 (
item}
items={this.state.dataSource}
onSelectedItem={item => alert(item)}
>
{({
getInputProps,
getListItemProps,
getItemProps,
inputValue,
selectedItem,
highlightedIndex,
items,
isOpen,
clearInputValue
}) => (
selected item: {selectedItem}
{isOpen && (
{items.map((item, index) => (
{item}
))}
)}
)}
);
}
}
render(, document.getElementById('root'));
```
## Examples
* [with simple basic data](https://github.com/ChoTotOSS/search-suggestion/tree/master/examples/withBasic)
* [with simple list object data](https://github.com/ChoTotOSS/search-suggestion/tree/master/examples/withStaticData)
* [with redux](https://github.com/ChoTotOSS/search-suggestion/tree/master/examples/withRedux)
* [with redux & debounce component](https://github.com/ChoTotOSS/search-suggestion/tree/master/examples/withDebounceInput)
## Props
### items
> `Array` | default is an empty array
Use as a datasource to render list result.
### getDisplayName
> `function(item: any)` => return a text
Use to display text content of selected item.
### onSelectedItem
> `function(item: any)`
Use to set new selected item value and extend the actions based on that selected
item.
## Child callback functions
### getInputProps
> `function({})`
Returns the props you should apply to the `input` element that you render.
### getListItemProps
> `function({})`
Returns the props you should apply to the list item element that you render.
### getItemProps
> `function({})`
Returns the props you should apply to any menu item elements you render.
## Actions
### clearInputValue
> `function()`
Clear current value in `input` element
## States
### inputValue
> `string`
The current value of `input` element
### highlightedIndex
> `int`
The current index of highlighted item
### items
> `array`
The current data of menu
### isOpen
> `boolean`
The menu open state
### selectedItem
The value of selected item
## Showcase
Websites built with Search Suggestion component
### [Chợ tốt](https://www.chotot.com/toan-quoc/mua-ban)
### [Chợ tốt nhà](https://nha.chotot.com/toan-quoc/du-an-rg0-cg10000)
## Alternatives
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:
* [react-select](https://github.com/JedWatson/react-select)
* [react-autocomplete](https://github.com/reactjs/react-autocomplete)
* [downshift](https://github.com/paypal/downshift/)