react-autosuggest

// npm i -S react-autosuggest autosuggest-highlight

import Autosuggest from 'react-autosuggest'
const match = require('autosuggest-highlight/match')
const parse = require('autosuggest-highlight/parse')

const onSuggestionsFetchRequested = curry((suggest, { value }) => {
  return suggest(value)
    .then((fsa) => {
      return { options: fsa.payload }
    })
})

const getSuggestionValue = (suggestion) => suggestion.name

const onNameChange = (updateValues, fieldName) => (ev, { newValue }) => {
  updateValues({ [fieldName]: newValue })
}

const onSuggestionsClearRequested = (clearSuggestions) => (ev) => {
  clearSuggestions()
}

const renderSuggestion = (suggestion, { query }) => {
  const matches = match(suggestion.name, query)
  const parts = parse(suggestion.name, matches)

  return (
    <div>
    {
      mapWithIdx((part, idx) => {
        const className = part.highlight ? classes.highlight : null

        return (
          <span className={className} key={idx}>{part.text}</span>
        )
      }, parts)
    }
    </div>
  )
}

const onSuggestionSelected = (evt, { suggestion, suggestionValue }) => {
}


render() {
const inputProps = {
    value: searchForm.name,
    onChange: onNameChange(updateValues, 'name'),
    placeholder: 'Name of your restaurant',
}

<Autosuggest
            suggestions={suggestions}
            onSuggestionsFetchRequested={onSuggestionsFetchRequested(suggest)}
            onSuggestionsClearRequested={onSuggestionsClearRequested(clearSuggestions)}
            onSuggestionSelected={onSuggestionSelected}
            getSuggestionValue={getSuggestionValue}
            renderSuggestion={renderSuggestion}
            inputProps={inputProps}
            theme={classes}
/>
}

// theming
.container {
  margin: 1%;
}
.suggestionsList {
  list-style: none;
  padding: 0;
}

.highlight {
  color: #ee0000;
  font-weight: bold;
}