Zenn
🦁

Autocomplete

2023/02/01に公開
3件
React
tech

オートコンプリート　直訳すると「自動補完」
選択肢の中から選ぶときに、候補になる文字を入れると選択肢の中から該当するものを絞り込んでくれる機能

公式ドキュメント

リンクたち

  • DEMO

  • カスタマイズ例

  • API

公式ページに記載のpropsについて


export const Autocoma = () => {
  return (
    <Autocomplete
      options={[]} // 必須
      renderInput={(params) => <TextField {...params} label={''} />} // 必須
      autoComplete // 存在意味不明
      autoHighlight // 存在意味不明
      autoSelect // 存在意味不明
      blurOnSelect // 存在意味不明
      ChipProps={{}} // chip要素に適用される
      clearIcon // デフォルトの代わりに表示するクリアアイコンを指定　デフォルト:<ClearIcon fontSize="small" />
      clearText='' // clearIconにマウスフォーカスしたときに表示されるテキストを指定する
      closeText='' // プルダウンメニューを閉じるボタンにマウスフォーカスしたときに表示されるテキストを指定する
      componentsProps={{}} // 不明
      defaultValue // *デフォルト値
      disableClearable // trueの場合、×ボタンが無くなる
      disableCloseOnSelect // *trueの場合、選択されてもポップアップが閉じない
      filterSelectedOptions // trueの場合、選択された項目を非表示にする
      forcePopupIcon // *入力欄のおしりにある三角のアイコンに対する表示設定
      freeSolo // trueの場合、選択肢にない文言も入力可能
      handleHomeEndKeys // home/end キーで選択肢を移動できる　※freeSoloがfalseの時
      includeInputInList // 不明
      inputValue='' // 入力値
      isOptionEqualToValue={('', '')} // オプションが与えられた値を表しているかどうかを判断する。デフォルトでは厳密な等式を使用
      // function(option: T, value: T) => boolean
      // option: The option to test.
      // value: The value to test against.
      limitTags={1} // フォーカスされていないときに表示されるタグの最大数を指定する
      ListboxComponent // リストボックスのレンダリングに使用
      ListboxProps // listbox要素に渡されるprops
      loading // 表示する提案が無い場合に、ローディングテキストを表示する
      loadingText // 表示するローディングテキスト
      multiple // trueの場合、valueは配列でないといけない = メニューは複数選択をサポートする
      noOptionsText // *オプションが無い時に表示するテキスト
      onChange={() => {}} //
      onClose={} // ポップアップが閉じることを要求したときに起こるコールバック
      // reason を指定する必要がある
      //       function(event: React.SyntheticEvent, reason: string) => void
      // event: The event source of the callback.
      // reason: Can be: "toggleInput", "escape", "selectOption", "removeOption", "blur".
      onHighlightChange // ハイライトオプションが変更された時に起こるコールバック
      onInputChange // 入力値が変化したときに起こるコールバック
      onOpen={}
      open
      openOnFocus // フォーカスされた時にポップアップを表示する　上二つも関連のProps
      openText='' // プルダウンメニューを開くボタンにマウスフォーカスしたときに表示されるテキストを指定する
      PaperComponent={} // ポップアップの本体をレンダリングするために使用
      PopperComponent // ポップアップを配置するために使用されるコンポーネント
      popupIcon // デフォルトのポップアップアイコンの代わりのアイコンを指定
      readOnly // trueの場合、リードオンリーになる。タグを削除できない複数タグにも対応
      // 下三つは、レンダリングに関わるprops
      renderGroup={}
      renderOption={}
      renderTags={}
      selectOnFocus // trueの場合、フォーカス時に入力のテキストが選択されます。これは、ユーザーが選択された値をクリアするのに役立ちます。
      size='small' // small | medium | string
      slotProps={} // 中の各スロットに使用されている小道具。
      sx={{}}
      value={} // 型：any オートコンプリートの値。選択されるためには、この値はオプションと参照等価でなければなりません。isOptionEqualToValue プロパティで等値性の動作をカスタマイズすることができます。
    />
  )
}

props詳細解説

各プロップスの詳細を、アルファベット順で記載する

defaultvalue : props.multiple ? [] : null

コンポーネントを制御しない場合に使用するデフォルト値
Type : any / default : null | multiple がtrueの場合、[]
※multiple=true の場合、defaultvalue={[arrayName[i]} の形で渡す

defaultValue={props.defaultVal ? [] : [{ code: '00000', label: 'すべて' }]}
getOptionLabel={(option: OptionsType) => option.label}

disableCloseOnSelect : false

値が選択された後の表示について
type : boolean / default : false (true で表示し続ける、false で閉じる)
※trueにすると連続で選択ができるので、multipleの時は追加する方がUI的にいいかもしれない

forcePopupIcon : 'auto'

入力欄のおしりにある三角のアイコンに対する表示設定
Type : boolean | 'auto' / default : 自動 (true で表示、false で非表示)
※freesoloの場合、自動でfalseになるので必要な場合はtrueに設定する

noOptionsText : 'No options'

オプションが無い時に表示するテキスト
type : node / default : 'No options'
noOptionsText={' 任意の文字列 '}
ex.該当する選択肢はありません / 해당하는 선택지가 없습니다


Q&A

  • 複数選択と自由入力は両立できますか？
    はい、できます。
    できますが、その場合の値の取得方法や、思わぬところでエラーが出ないかどうかは調査しきれていません。

  • defaultValue の使い方がいまいちよく分かっていません
    はい、私もわかっていません。知ってる方がいたら教えてほしいです。泣

実装例

  • 例①　form と合わせて実装する
  • 例②

Discussion