Search Suggestion

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

Table content

• Installation
• Usage
• Examples
• Props
• Child callback functions
• Actions
• States
• Showcase
• Alternatives

Installation

npm install --save search-suggestion

or

yarn add search-suggestion

Usage

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 = {
      currentData: []
    };
  }

  createData = (word, data) => {
    const re = new RegExp(`${word.toLowerCase()}.*\\B`, 'g');
    return data.filter(item => re.test(item.toLowerCase()));
  };

  handleChange = e => {
    const value = e.target.value;
    let filterData = [];
    if (value) {
      filterData = this.createData(value, items);
    }
    this.setState({
      currentData: filterData
    });
  };

  render() {
    return (
      <Suggestion
        getDisplayName={item => item}
        items={this.state.currentData}
        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'));

Examples

• with simple basic data
• with simple list object data
• with redux
• with redux & debounce component

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

Chợ tốt nhà

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
• react-autocomplete
• downshift