Skip to content

Instantly share code, notes, and snippets.

@vvatikiotis
Last active October 6, 2016 09:52
Show Gist options
  • Save vvatikiotis/7fc463866b620908a7e00973fd4110a9 to your computer and use it in GitHub Desktop.
Save vvatikiotis/7fc463866b620908a7e00973fd4110a9 to your computer and use it in GitHub Desktop.
// 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment