MUIのAutocompleteの基本を抑える

はじめに

Google検索などで、テキストボックスに値を入力すると、入力候補の値がプルダウンでサジェストされるのを見たことがあるかと思います。

あのUIを表現できるのが、MUIのAutocompleteです。

業務で使う機会があったので、その基本的な使い方を抑えてみます。

基本の使い方

画面例

まず、先に画面例から示します。

コード例

このような挙動が以下のコードで簡単に実装できます。

import { Autocomplete, TextField } from "@mui/material";
import { useState } from "react";
interface Fruit {
  value: string;
  label: string;
}
const films: Fruit[] = [
  { value: 'apple', label:'りんご'},
  { value: 'banana', label:'ばなな'},
  { value: 'cherry', label:'さくらんぼ'},
];

const BasicAutocomplete = () => {
  const [value, setValue] = useState<Fruit | null>(null);

  return (
    <Autocomplete
      value={value}
      onChange={(_e, newValue: Fruit | null) => {
        setValue(newValue);
      }}
      options={films}
      getOptionLabel={(option) => option.label}
      renderInput={(params) => (
        <TextField {...params} label="フルーツを選択" variant="outlined" />
      )}
    />
  );
};

export default BasicAutocomplete;

コード解説

Autcompleteコンポーネントの基本的なプロパティについて確認していきます。

value

設定されている値です。
これはMUIのどのコンポーネントでも基本的に同じなので特段の解説は不要かと思います。

onChange

値が変更されたときの挙動です。
こちらも特段の解説はしません。

options

選択可能な値を配列で指定します。
これがプルダウンでサジェストされる値になります。

getOptionLabel

プルダウンに表示される表示名を設定する関数を指定します。
関数は引数にoptionsの要素を受け取ります。
戻り値として、設定したい表示名を指定します。

renderInput

入力フィールドのレンダリングをカスタマイズできます。
基本的にはTextFieldコンポーネントを指定します。

ここで使用しているのは本当にごく一部で、ほかにも多くのオプションを指定できます。
値のフィルタリングや、複数選択の制御、フォーカスを当てたときの挙動など、本当にさまざまなカスタマイズができます。

詳細は以下を参照してください

まとめ

基礎の基礎の使い方をまとめました。
これだけだとあまり内容が充実していないので、よくあるエラーやより細かいカスタマイズについて、今後内容を追記していければと思っています。