React.js
Pocket

react-autosuggestを使ってサジェスト機能を作る機会があったのでメモ

react-autosuggest

大体はこちらの記事を参考にできました!ありがたい。

react-autosuggestでサジェスト(Autocomplete)項目を作る

使い方

いろいろ省略しまくってますが、イメージこんな感じです。

suggestionsは取得したサジェスト一覧。renderSuggestionでサジェストされたリストのHTMLを組むことができます。

inputPropsでサジェストのテキストフォームのvalueやonChangeを渡したりします。

onSuggestionSelectedでサジェスト項目をクリックした時の処理ですが、引数のsuggestionでその項目の値を取得できます。

import Autosuggest from 'react-autosuggest'

class AutosuggestForm extends React.Component {

  renderSuggestion (suggestion) {
    return (
      <div>
        <p>{suggestion.name}</p>
      </div>
    )
  }

  handleOnSuggestionSelected (event, { suggestion, suggestionValue, suggestionIndex, sectionIndex, method }) {

  }

  render () {
    const inputProps = {
      placeholder: placeholder,
      value: this.props.client.name,
      onChange: this.onClientNameChanged
    }
    return (
      <Autosuggest
        suggestions={this.state.suggestions}
        onSuggestionsFetchRequested={this.searchFood}
        onSuggestionsClearRequested={this.handleOnSuggestionsClearRequested}
        getSuggestionValue={this.getSuggestionValue}
        renderSuggestion={this.renderSuggestion}
        inputProps={inputProps}
        onSuggestionSelected={this.handleOnSuggestionSelected}
      />
    )
  }
}

ざっくりとした使い方ですが、割と簡単に使えてサジェストを実装できます。

Pocket