ふかしぎのReactさんぷるず

Autocompleteの解説 Componet API - MUI v5 API - Reactさんぷるず

最終更新 2022/06/20
MUI v5の各機能の説明です。
対象のMUIのバージョンは v5.8.4 です。
ここでは初心者向けの基本的な説明をしています。

使用するための下準備

お約束です。取り込まないと使えません。
インポートならば
import { Autocomplete } from '@mui/material';
CDNで使いたいのなら<script>でMUIを読み込んだ後に
const Autocomplete = MaterialUI.Autocomplete;
const TextField = MaterialUI.TextField;
で使用できるようになります。
だいたいTextFieldも使用するで宣言しておきましょう。
CDNでの詳しいやり方はこちらに移動してください。

Autocompleteの各プロパティの解説

MUIでのオートコンプリートの扱い方の説明です。
Autocompleteでオートコンプリート機能のある入力欄を作成します。
通常は入力欄にTextFieldを利用しています。

options *

Autocompleteのoptionsの使い方の説明です。
必須です。設定を忘れると下の注意メッセージのように怒られます。
Warning: Failed prop type: The prop `options` is marked as required in `ForwardRef(Autocomplete)`, but its value is `undefined`.
オートコンプリートのドロップダウンリストに表示したいものを配列でoptionsに設定します。
一番シンプルなのは文字列の配列を渡すことです。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<Autocomplete options={doubutsu} renderInput={(params) => <TextField {...params} label="どうぶつ" />} />
, document.getElementById('sample')
);
上の一番シンプルな文字列の配列は手を抜かずに書くとlabelという名前の連想配列と同じ意味になります。
Autocompleteはlabelの中身をドロップダウンリストに表示します。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = [
 { label: 'いぬ' },
 { label: 'ねこ' },
];
ReactDOM.render(
<Autocomplete options={doubutsu} renderInput={(params) => <TextField {...params} label="どうぶつ" />} />
, document.getElementById('sample')
);

renderInput *

AutocompleteのrenderInputの使い方の説明です。
必須です。設定を忘れると下の注意メッセージのように怒られます。
Warning: Failed prop type: The prop `renderInput` is marked as required in `ForwardRef(Autocomplete)`, but its value is `undefined`.
renderInputを使ってオートコンプリートの入力欄の設定をします。
ノードを返す関数を設定します。
TextFieldを設定するのがよくあるパターンです。
アロー関数で書くとJSXのせいで=> <と初心者にはよくわからなくなるので普通の関数でのサンプルも並べます。
アロー関数か普通の関数かの違いなので上下ともほぼ同じ意味になります。(厳密には違う部分もあります)
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
  <Autocomplete options={doubutsu} renderInput={ params => <TextField {...params} label="どうぶつ アロー関数" />} />
  <Autocomplete options={doubutsu} renderInput={ function(params) { return (<TextField {...params} label="どうぶつ 普通の関数" />)} } />
</div>
, document.getElementById('sample')
);

autoComplete

AutocompleteのautoCompleteの使い方の説明です。
なにをいっているんだこいつはといった感じですが先頭が大文字のAutocompleteはコンポーネントです。そのコンポーネントのプロパティの先頭が小文字のautoCompleteの説明です。
このautoCompleteは入力中の文字列に選択肢の選択中の文字列を追加表示して補完するかの設定です。
すこしわかりづらいですがサンプルの上段のオートコンプリートありの入力欄で「い」と一文字入力して方向キー(カーソルキー)の下を押してください。オートコンプリートありの方は入力欄の「い」の後に選択中の候補の文字が追加表示されます。
下の画像のように「ぬ1」が反転されて表示されます。
AutocompleteコンポーネントのautoCompleteプロパティで文字が補完される。
※注意してください。ブール値を渡さなければいけないためautoComplete="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。autoCompleteと書くだけでautoComplete={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ1','いぬ2', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete autoComplete={true} options={doubutsu} renderInput={(params) => <TextField {...params} label="オートコンプリートあり" />} />
<Autocomplete autoComplete={false} options={doubutsu} renderInput={(params) => <TextField {...params} label="オートコンプリートなし" />} />
</div>
, document.getElementById('sample')
);

autoHighlight

AutocompleteのautoHighlightの使い方の説明です。
ドロップダウンリストを表示した際に最初の選択肢の背景を変えます。
このサンプルではオートコンプリートありのほうはドロップダウンリストを表示した時点で最初の選択肢の「いぬ」がうっすら灰色の背景になっています。
これだけではあまり意味が無いように思えますが下のautoSelectと組み合わせると意味を持ちます。
具体的なことはautoHighlightとautoSelectに移動してください。
※注意してください。ブール値を渡さなければいけないためautoHighlight="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。autoHighlightと書くだけでautoHighlight={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete autoHighlight={true} options={doubutsu} renderInput={(params) => <TextField {...params} label="オートコンプリートあり" />} />
<Autocomplete autoHighlight={false} options={doubutsu} renderInput={(params) => <TextField {...params} label="オートコンプリートなし" />} />
</div>
, document.getElementById('sample')
);

autoSelect

AutocompleteのautoSelectの使い方の説明です。
フォーカスが外れたときに選んでいた選択肢(背景がうっすらと灰色になっているもの)を自動的に入力欄に入れます。
※注意してください。ブール値を渡さなければいけないためautoSelect="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。autoSelectと書くだけでautoSelect={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
サンプルの上段autoSelectありの入力欄にフォーカスを当ててドロップダウンリストを表示してください。矢印キー(カーソルキー)の下を押して「いぬ」を選んだ状態にしてどこか別の場所をクリックして入力欄からフォーカスを外してください(ここをクリックしてフォーカスを外してもいいです)。入力欄に「いぬ」が表示されているがわかります。
サンプルの下段のautoSelectなしで同じことをしても入力欄は空欄のままです。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete autoSelect={true} options={doubutsu} renderInput={(params) => <TextField {...params} label="autoSelectあり" />} />
<Autocomplete autoSelect={false} options={doubutsu} renderInput={(params) => <TextField {...params} label="autoSelectなし" />} />
</div>
, document.getElementById('sample')
);

autoHighlightとautoSelect

autoHighlightとautoSelectの組み合わせです。
入力欄にフォーカスを当ててドロップダウンで候補を表示した時点でフォーカスが外れた際に必ず入力欄になにか値が入ることが確定します。
サンプルの上段「autoHighlightありとautoSelectあり」をクリックしてドロップダウンリストを表示したら他の場所をクリックしてフォーカスを外してください(ここをクリックしてフォーカスを外してもいいです)。入力欄に値が入っていることがわかります。
サンプルの下段は同じことをしても入力欄は空欄のままです。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete autoHighlight autoSelect options={doubutsu} renderInput={(params) => <TextField {...params} label="autoHighlightありとautoSelectあり" />} />
<Autocomplete options={doubutsu} renderInput={(params) => <TextField {...params} label="autoHighlightなしとautoSelectなし" />} />
</div>
, document.getElementById('sample')
);

blurOnSelect

AutocompleteのblurOnSelectの使い方の説明です。
選択後にフォーカスを外すかどうかの設定です。
true、falseの他に"mouse"マウスイベントの時のみ、"touch"スマホなどタッチイベントの時のみがあります。
※注意してください。ブール値の場合はblurOnSelect="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。blurOnSelectと書くだけでblurOnSelect={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete blurOnSelect={true} options={doubutsu} renderInput={(params) => <TextField {...params} label="blurOnSelectあり 選択後にフォーカスを外す" />} />
<Autocomplete blurOnSelect={false} options={doubutsu} renderInput={(params) => <TextField {...params} label="blurOnSelectなし 選択後もフォーカスされたまま" />} />
<Autocomplete blurOnSelect="mouse" options={doubutsu} renderInput={(params) => <TextField {...params} label="blurOnSelectありマウスイベント マウス操作の時だけ選択後にフォーカスを外す" />} />
<Autocomplete blurOnSelect="touch" options={doubutsu} renderInput={(params) => <TextField {...params} label="blurOnSelectありタッチイベント スマホのタッチイベントの時だけ選択後のフォーカスを外す" />} />
</div>
, document.getElementById('sample')
);

ChipProps

AutocompleteのChipPropsの使い方の説明です。
Chipエレメントのプロパティを設定します。

classes

Autocompleteのclassesの使い方の説明です。
CSSの設定を上書きします。

clearIcon

AutocompleteのclearIconの使い方の説明です。
入力欄に文字を入れた後に右端にそれを消すクリアアイコンが現れます。
そのクリアアイコンを設定できます。
ノードを設定すれば良いのでアイコンでなくても構いません。
サンプルで「いぬ」を選択してください。入力欄の右端に「×消す」が表示されます。
余談ですが以前はcloseIconという名称だったので内部ではあちこちにcloseIconという名の痕跡が見られます。クローズアイコンって意味違くね?という話がでてきたので改名されました。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
const KesuButton = () => <div>×消す</div>;
ReactDOM.render(
<Autocomplete clearIcon={<KesuButton />} options={doubutsu} renderInput={(params) => <TextField {...params} label="clearIcon" />} />
, document.getElementById('sample')
);

clearOnBlur

AutocompleteのclearOnBlurの使い方の説明です。
フォーカスが外れたときに入力欄に入力した文字を消し空欄にします。
サンプルで「いぬ」と入力してフォーカスを外してみてください。入力欄が空欄になります。(=ドロップダウンリストに選択したもの(背景が薄い青色)が無い場合)
ドロップダウンリストから「いぬ」を選択した場合はフォーカスを外してもの空欄にはならないです。
※注意してください。ブール値を渡さなければいけないためclearOnBlur="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。clearOnBlurと書くだけでclearOnBlur={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
デフォルトの値はfreeSoloに依存しfreeSoloとは逆になります。
freeSoloはデフォルトはfalseです。
freeSoloclearOnBlurselectOnFocus、ドロップダウンリストでHomeキーEndキーが機能するか、ドロップダウンリストの表示表示の右端の▼を表示するか、に影響します。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete clearOnBlur={true} options={doubutsu} renderInput={(params) => <TextField {...params} label="clearOnBlurあり" />} />
<Autocomplete clearOnBlur={false} options={doubutsu} renderInput={(params) => <TextField {...params} label="clearOnBlurなし" />} />
<Autocomplete freeSolo={true} options={doubutsu} renderInput={(params) => <TextField {...params} label="freeSoloあり(=clearOnBlurなし)" />} />
</div>
, document.getElementById('sample')
);

clearOnEscape

AutocompleteのclearOnEscapeの使い方の説明です。
キーボードの左上のESCキー(エスケープキー)を押した際に入力欄を消すかどうかの設定です。
とても分かりづらいです。
clearOnEscapeの設定に関係なく1度目のESCキーでドロップダウンリストの一覧を消します。
clearOnEscapeはその1度目のESCキーでドロップダウンリストが消えた後の設定になります。
さらにESCキーを押すと入力欄の文字列を消します。
2度ESCキーを連打しないと機能しない設定です。
※注意してください。ブール値を渡さなければいけないためclearOnEscape="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。clearOnEscapeと書くだけでclearOnEscape={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
サンプルの上段で「い」と打ち込んでESCキーを1度押してください。まずはドロップダウンリストが消えます。そしてもう一度ESCキーを押してください。この2度目のESCキーで入力していた「い」という文字が入力欄から消えます。
サンプルの下段で同じことをしても「い」という文字は消えません。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete clearOnEscape={true} options={doubutsu} renderInput={(params) => <TextField {...params} label="clearOnEscapeあり" />} />
<Autocomplete clearOnEscape={false} options={doubutsu} renderInput={(params) => <TextField {...params} label="clearOnEscapeなし" />} />
</div>
, document.getElementById('sample')
);

clearText

AutocompleteのclearTextの使い方の説明です。
入力欄に文字がある場合に右端に表示される×ボタンにポップアップする文字の設定です。
なにも設定しないと×ボタンの上にマウスカーソルをしばらく置くとデフォルトでは「Clear」という文字がポップアップ表示されます。
サンプルではその「Clear」の文字を「消すぞ」に変えます。
これは文字列しか指定できません。ノードを設定することはできません。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete clearText="消すぞ" options={doubutsu} renderInput={(params) => <TextField {...params} label="clearTextあり" />} defaultValue="いぬ" />
<Autocomplete options={doubutsu} renderInput={(params) => <TextField {...params} label="clearTextなし" />} defaultValue="いぬ" />
</div>
, document.getElementById('sample')
);

closeText

AutocompleteのcloseTextの使い方の説明です。
ドロップダウンリストを表示中に入力欄の右端にある▲にポップアップする文字列の設定です。
なにも設定しないと▲ボタンの上にマウスカーソルをしばらく置くとデフォルトでは「Close」という文字が表示されます。
サンプルではその「Close」の文字を「ドロップダウンを消すぞ」に変えます。
これは文字列しか指定できません。ノードを設定することはできません。
openTextで▼状態の開くときのメッセージを設定できます。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete closeText="ドロップダウンを消すぞ" options={doubutsu} renderInput={(params) => <TextField {...params} label="closeTextあり" />}  />
<Autocomplete options={doubutsu} renderInput={(params) => <TextField {...params} label="closeTextなし" />}  />
</div>
, document.getElementById('sample')
);

componentsProps

AutocompleteのcomponentsPropsの使い方の説明です。
省略

defaultValue

AutocompleteのdefaultValueの使い方の説明です。
コントロールされない初期値を設定できます。
コントロールされないの意味はReact側で操作しているかどうかです。
defaultValueはReact側が関知しないのでユーザー側で好きなように変更できます。
サンプルの上段のdefaultValueで「ねこ」を選択してフォーカスを外しても入力欄は「ねこ」のままです。
一方、valueはReact側がコントロールするのでユーザー側で変更しようとしても元のvalueの値に戻ります。
サンプルの下段のvalueで「ねこ」を選択してフォーカスを外したら元の「いぬ」に戻ります。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete defaultValue="いぬ" options={doubutsu} renderInput={(params) => <TextField {...params} label="defaultValue" />}  />
<Autocomplete value="いぬ" options={doubutsu} renderInput={(params) => <TextField {...params} label="value" />}  />
</div>
, document.getElementById('sample')
);

disableClearable

AutocompleteのdisableClearableの使い方の説明です。
入力欄に文字列があるときに右端に×ボタンを表示するかの設定です。
通常はマウスが上にあるかフォーカスが当たった時に×ボタンが表示されます。
※注意してください。ブール値を渡さなければいけないためdisableClearable="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。disableClearableと書くだけでdisableClearable={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete disableClearable={true} options={doubutsu} renderInput={(params) => <TextField {...params} label="disableClearableあり" />} defaultValue="いぬ" />
<Autocomplete disableClearable={false} options={doubutsu} renderInput={(params) => <TextField {...params} label="disableClearableなし" />} defaultValue="いぬ"  />
</div>
, document.getElementById('sample')
);

disableCloseOnSelect

AutocompleteのdisableCloseOnSelectの使い方の説明です。
ドロップダウンリストで選択したあとにドロップダウンリストを消すかどうかの設定です。
選択後にもドロップダウンリストを表示したままにしたい場合にこれを使用します
※注意してください。ブール値を渡さなければいけないためdisableCloseOnSelect="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。disableCloseOnSelectと書くだけでdisableCloseOnSelect={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
サンプルの上段はドロップダウンリストで「いぬ」を選択してもドロップダウンリストを表示したままです。
一方サンプルの下段はドロップダウンリストで「いぬ」を選択したらドロップダウンリストは消えます。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete disableCloseOnSelect={true} options={doubutsu} renderInput={(params) => <TextField {...params} label="disableCloseOnSelectあり" />} />
<Autocomplete disableCloseOnSelect={false} options={doubutsu} renderInput={(params) => <TextField {...params} label="disableCloseOnSelectなし" />}  />
</div>
, document.getElementById('sample')
);

disabled

Autocompleteのdisabledの使い方の説明です。
Autocompleteを使用不可にするかの設定です。
使用不可になると全体が薄い灰色で表示されます。
※注意してください。ブール値を渡さなければいけないためdisabled="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。disabledと書くだけでdisabled={true}と同じ意味になります。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete disabled={true} options={doubutsu} renderInput={(params) => <TextField {...params} label="disabledあり" />} />
<Autocomplete disabled={false} options={doubutsu} renderInput={(params) => <TextField {...params} label="disabledなし" />}  />
</div>
, document.getElementById('sample')
);

disabledItemsFocusable

AutocompleteのdisabledItemsFocusableの使い方の説明です。
ドロップダウンリストの選択不可にした項目にもフォーカスを当てるかの設定です。
ドロップダウンリストの選択不可はgetOptionDisabledで行います。
※注意してください。ブール値を渡さなければいけないためdisabledItemsFocusable="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。disabledItemsFocusableと書くだけでdisabledItemsFocusable={true}と同じ意味になります。
下のサンプルは「いぬ」は選択不可にしています。選択不可の項目は薄い灰色になります。
入力欄にフォーカスを当て矢印キー(カーソルキー)の下を押してください。
上段のdisabledItemsFocusableが有効な方は「いぬ」にもフォーカスが当たります。ですが下段はスキップして次の項目の「ねこ」にフォーカスが当たります。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete disabledItemsFocusable={true} options={doubutsu} renderInput={(params) => <TextField {...params} label="disabledItemsFocusableあり"/>} getOptionDisabled={(option)=> option == 'いぬ'} />
<Autocomplete disabledItemsFocusable={false} options={doubutsu} renderInput={(params) => <TextField {...params} label="disabledItemsFocusableなし" />} getOptionDisabled={(option)=> option == 'いぬ'} />
</div>
, document.getElementById('sample')
);

disableListWrap

AutocompleteのdisableListWrapの使い方の説明です。
ドロップダウンリストの端になったとき反対側の端に移動するかどうかの設定です。
フォーカスをあててドロップダウンリストを表示し矢印キー(カーソルキー)を下方向に連打してください。disableListWrapが有効な方は末端で止まります。
MUIはちょいちょいわかりづらい名称を使うので困ります。disableListLoopとかつけてくれたらよいのに。
余談ですがドロップダウンリストを表示中にHomeキーやEndキーで先頭や末尾に移動できます。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ', 'うさぎ'];
ReactDOM.render(
<div>
<Autocomplete disableListWrap={true} options={doubutsu} renderInput={(params) => <TextField {...params} label="disableListWrapあり" />} />
<Autocomplete disableListWrap={false} options={doubutsu} renderInput={(params) => <TextField {...params} label="disableListWrapなし" />} />
</div>
, document.getElementById('sample')
);

disablePortal

省略

filterOptions

AutocompleteのfilterOptionsの使い方の説明です。
filterOptionsはドロップダウンリストに設定するoptionsにフィルターをかけ抽出して表示します。
サンプルの上段では文字数が3文字未満のものしか表示しません。「うさぎ」は除かれます。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ', 'うさぎ'];
ReactDOM.render(
<div>
<Autocomplete options={doubutsu}
  filterOptions={
    (options) => options.filter(option=>option.length<3)
  }
  renderInput={(params) => <TextField {...params} label="filterOptionsあり" />} />
<Autocomplete options={doubutsu} renderInput={(params) => <TextField {...params} label="filterOptionsなし" />} />
</div>
, document.getElementById('sample')
);

filterSelectedOptions

AutocompleteのfilterSelectedOptionsの使い方の説明です。
filterSelectedOptionsはドロップダウンリストから選択して入力欄に表示されたものをドロップダウンリストから非表示にします。
サンプルでは「いぬ」を選択したらドロップダウンリストは「ねこ」と「うさぎ」しか表示しません。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ', 'うさぎ'];
ReactDOM.render(
<div>
<Autocomplete filterSelectedOptions={true} options={doubutsu} renderInput={(params) => <TextField {...params} label="filterSelectedOptionsあり" />} />
<Autocomplete filterSelectedOptions={false} options={doubutsu} renderInput={(params) => <TextField {...params} label="filterSelectedOptionsなし" />} />
</div>
, document.getElementById('sample')
);

forcePopupIcon

AutocompleteのforcePopupIconの使い方の説明です。
ドロップダウンリストを表示・非表示をする▼を入力欄の右端に表示するかの設定です。
未設定のデフォルトは文字列のautoです。autoはfreeSoloに依存します。
freeSoloはデフォルトはfalseです。
freeSoloclearOnBlurselectOnFocus、ドロップダウンリストでHomeキーEndキーが機能するか、ドロップダウンリストの表示表示の右端の▼を表示するか、に影響します。
※注意してください。ブール値の場合はforcePopupIcon="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。forcePopupIconと書くだけでforcePopupIcon={true}と同じ意味になります。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete forcePopupIcon={true} options={doubutsu} renderInput={(params) => <TextField {...params} label="forcePopupIconあり" />} />
<Autocomplete forcePopupIcon={false} options={doubutsu} renderInput={(params) => <TextField {...params} label="forcePopupIconなし" />} />
<Autocomplete forcePopupIcon='auto' freeSolo={true} options={doubutsu} renderInput={(params) => <TextField {...params} label="forcePopupIconがautoでfreeSoloあり" />} />
<Autocomplete forcePopupIcon='auto' freeSolo={false} options={doubutsu} renderInput={(params) => <TextField {...params} label="forcePopupIconがautoでfreeSoloなし" />} />
</div>
, document.getElementById('sample')
);

freeSolo

AutocompleteのfreeSoloの使い方の説明です。
freeSoloはデフォルトはfalseです。
有効にするとドロップダウンリストに関連付けされません。
・入力欄に文字が入力されたら右端に×のクリアボタンを表示します。
・フォーカスが外れても入力された文字が残ります。
・ドロップダウンリストでHomeやEndを押しても先頭や末尾に移動しません。
・ドロップダウンリストを表示非表示する▼を入力欄の右端に表示しません。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete freeSolo={true} options={doubutsu} renderInput={(params) => <TextField {...params} label="freeSoloあり" />} />
<Autocomplete freeSolo={false} options={doubutsu} renderInput={(params) => <TextField {...params} label="freeSoloなし" />} />
</div>
, document.getElementById('sample')
);

fullWidth

AutocompleteのfullWidthの使い方の説明です。
fullWidthは横幅いっぱいに広げるかを設定します。
デフォルトはfalseです。
ですがrenderInput内でfullWidthがtrueに設定されているので渡されたparamsで常にtrueになってしまいます。
そのためAutocompleteコンポーネントのfullWidthは実質機能しません。
無理やりfullWidthを無効にするとしたらparamsの後ろでfalseを指定します。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete fullWidth={true} options={doubutsu} renderInput={(params) => <TextField {...params} label="fullWidthあり" />} />
<Autocomplete fullWidth={false} options={doubutsu} renderInput={(params) => <TextField {...params} label="fullWidthなし" />} />
<Autocomplete options={doubutsu} renderInput={(params) => <TextField fullWidth={false} {...params} label="TextFieldでfullWidthなし(paramsの前)"  />} />
<Autocomplete options={doubutsu} renderInput={(params) => <TextField {...params} fullWidth={false} label="TextFieldでfullWidthなし(paramsの後)" />} />
</div>
, document.getElementById('sample')
);

getLimitTagsText

AutocompleteのgetLimitTagsTextの使い方の説明です。
これはAutocompleteの複数選択用の設定です。
multipleを設定して複数選択できるときフォーカスが外れたときにlimitTagsで設定した表示件数以上を非表示にできます。その際に表示するメッセージを設定できます。
moreで省略した件数を取得できるので組み合わせて〇〇個省略といった具合に使います。
未設定のデフォルトは(more) => `+${more}`です。
下のサンプルは複数選択できます。2個以上選択した後にフォーカスを外すと表示を省略して2個だけ表示して残りは非表示にした後に省略したとき用のメッセージ「〇〇個省略」を表示します。
「いぬ」「ねこ」「うさぎ」と選択した後に別の場所をクリックしてフォーカスを外してください。
「うさぎ」の表示が消え「1個諸略」という文字が表示されます。
さらに「たぬき」も選択したあとに入力欄からフォーカスを外したら「うさぎ」と「たんき」の表示が消え「2個省略」という文字が表示されます。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ', 'うさぎ', 'たぬき'];
ReactDOM.render(
<Autocomplete multiple getLimitTagsText={(more)=>more+'個省略'} limitTags={2} options={doubutsu} renderInput={(params) => <TextField {...params} label="multipleでのgetLimitTagsText設定、limitTagsで上限2個" />} />
, document.getElementById('sample')
);

getOptionDisabled

AutocompleteのgetOptionDisabledの使い方の説明です。
条件に一致するドロップダウンリストの項目を使用不可にする設定です。
関数を設定します。引数のoptionにドロップダウンリストの項目が入ります。戻り値をブール値にしtrueのときは使用不可になります。
サンプルでは名称が「ねこ」と一致する場合はtrueにして使用不可にしています。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<Autocomplete getOptionDisabled={(option)=>option=='ねこ'?true:false} options={doubutsu} renderInput={(params) => <TextField {...params} label="getOptionDisabled" />} />
, document.getElementById('sample')
);

getOptionLabel

AutocompleteのgetOptionLabelの使い方の説明です。
ドロップダウンリストの項目で条件に一致する場合に文字を付け加えることができます。
サンプルでは名称が「ねこ」と一致する場合は(にゃんこ)という文字を付け加えます。
デフォルトは(option) => option.label ?? optionです。
??と二つ続いているものはNull合体演算子と呼ばれる論理演算子です。
nullやundefinedじゃないなら左側を使い、値がないなら右側を使うという仕組みです。
ドロップダウンリストの配列にlabelがあればそれを表示し、なければそれ自身を表示する仕組みになっています。
つまり
const doubutsu = ["いぬ", "ねこ"];
const doubutsu = [{"label":"いぬ"}, {"label":"ねこ"}];
は同じ意味になります。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu1 = ['いぬ', 'ねこ'];
const doubutsu2 = [{"label":"いぬ"}, {"label":"ねこ"}];
ReactDOM.render(
<div>
<Autocomplete getOptionLabel={(option)=>option=='ねこ'?option+'(にゃんこ)':option} options={doubutsu1} renderInput={(params) => <TextField {...params} label="getOptionLabel (文字列の配列)" />} />
<Autocomplete getOptionLabel={(option)=>option.label=='ねこ'?option.label+'(にゃんこ)':option.label} options={doubutsu2} renderInput={(params) => <TextField {...params} label="getOptionLabel (lavel付きの連想配列の配列)" />} />
</div>
, document.getElementById('sample')
);

groupBy

AutocompleteのgroupByの使い方の説明です。
ドロップダウンリストをグループ化して表示したい場合に使用します。
サンプルではドロップダウンリストの項目に「ねこ」の文字が含まれている場合は「にゃんこーず」という見出しでグループ化します。何も指定しない場合はそれ自身の名称でグループ化されます。
グループ化したドロップダウンリストの見た目を変えるにはrenderGroupを使用します。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'おやねこ', 'こねこ', 'うさぎ'];
ReactDOM.render(
<Autocomplete groupBy={(option)=>option.indexOf('ねこ')>-1?'にゃんこーず':option} options={doubutsu} renderInput={(params) => <TextField {...params} label="groupBy" />} />
, document.getElementById('sample')
);

handleHomeEndKeys

AutocompleteのhandleHomeEndKeysの使い方の説明です。
ドロップダウンリストが表示されているときにHomeキーを押した場合は項目の一番上に、Endキーを押した場合は項目の一番下に移動する機能を有効にするかの設定です。
サンプルの入力欄にフォーカスをあててドロップダウンリストを表示したのちにHomeキーやEndキーを押してください。handleHomeEndKeysをありにした方は上端下端に移動しますが、なしのほうは移動しません。
デフォルトの値はfreeSoloに依存しfreeSoloとは逆になります。
freeSoloはデフォルトはfalseです。つまりhandleHomeEndKeysのデフォルトは有効になっています。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ', 'うさぎ'];
ReactDOM.render(
<div>
<Autocomplete handleHomeEndKeys={true} options={doubutsu} renderInput={(params) => <TextField {...params} label="handleHomeEndKeysあり" />} />
<Autocomplete handleHomeEndKeys={false} options={doubutsu} renderInput={(params) => <TextField {...params} label="handleHomeEndKeysなし" />} />
<Autocomplete options={doubutsu} renderInput={(params) => <TextField {...params} label="handleHomeEndKeys未設定(デフォルト)" />} />
</div>
, document.getElementById('sample')
);

id

HTMLのidと一緒なので省略
未設定でもReactが内部で管理するためにIDが必要なのでReactが自動的に適当なidを付けます。

includeInputInList

AutocompleteのincludeInputInListの使い方の説明です。
ドロップダウンリストのハイライトに入力欄も含めるかの設定です。
サンプルの入力欄にフォーカスをあててドロップダウンリストを表示して矢印キー(カーソルキー)の下を連打してください。
ありのほうは一番下に行った後に入力欄に移動します(つまりドロップダウンリストはなにもハイライトされない。)。さらに下を押すとドロップダウンリストの一番上がハイライトします。
一方なしのほうは一番下に行った後はすぐに一番上がハイライトされます。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete includeInputInList={true} options={doubutsu} renderInput={(params) => <TextField {...params} label="includeInputInListあり" />} />
<Autocomplete includeInputInList={false} options={doubutsu} renderInput={(params) => <TextField {...params} label="includeInputInListなし" />} />
</div>
, document.getElementById('sample')
);

inputValue

AutocompleteのinputValueの使い方の説明です。
生成されたINPUT要素のvalueに入れる値です。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<Autocomplete inputValue="ねこ" options={doubutsu} renderInput={(params) => <TextField {...params} label="inputValueあり" />} />
, document.getElementById('sample')
);

isOptionEqualToValue

省略
optionとvalueを厳密に(===)で評価します。

limitTags

AutocompleteのlimitTagsの使い方の説明です。
これはAutocompleteの複数選択用の設定です。
multipleを設定して複数選択できるときフォーカスが外れたときにlimitTagsで設定した表示件数以上を非表示にできます。
未設定のデフォルトは-1です。その場合は一定数以上非表示の機能が無くなります。
下のサンプルは複数選択できます。2個以上選択した後にフォーカスを外すと表示を省略して2個だけ表示します。
「いぬ」「ねこ」「うさぎ」と選択した後に別の場所をクリックしてフォーカスを外してください。
デフォルトは(more) => `+${more}`です。省略された個数がmoreに入り「+1」や「+2」と表示されます。
フォーカスを外した時に表示される+1や+2の文字はgetLimitTagsTextで変更できます。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ', 'うさぎ', 'たぬき'];
ReactDOM.render(
<Autocomplete multiple  limitTags={2} options={doubutsu} renderInput={(params) => <TextField {...params} label="multipleのlimitTagsで上限2個" />} />
, document.getElementById('sample')
);

ListboxComponent

AutocompleteのListboxComponentの使い方の説明です。
※注意してくださいListboxComponentと先頭の文字は大文字のLです。
ドロップダウンリストの項目を表示する際に使用する要素を指定します。
デフォルトはUL要素です。
サンプルではあまりよくないですがここではわかりやすくB要素を指定しています。ブラウザによってはドロップダウンリストの項目がB要素で囲まれたため太字で表示されているはずです。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<Autocomplete ListboxComponent="b" options={doubutsu} renderInput={(params) => <TextField {...params} label="ListboxComponent(B要素使用)" />} />
, document.getElementById('sample')
);

ListboxProps

AutocompleteのListboxPropsの使い方の説明です。
※注意してくださいListboxPropsと先頭の文字は大文字のLです。
ListboxPropsでドロップダウンリストへプロパティを渡せます。
サンプルはドロップダウンリストへスタイルの設定を渡しています。文字を赤に、枠線を緑にします。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<Autocomplete ListboxProps={{"style":{"color":"red","border":"1px solid green"}}} options={doubutsu} renderInput={(params) => <TextField {...params} label="ListboxPropsで文字赤、枠線緑に" />} />
, document.getElementById('sample')
);

loading

Autocompleteのloadingの使い方の説明です。
loadingは状態をローディングに設定します。
trueの状態でドロップダウンリストを表示すると「Loading…」と表示されます。この文章はloadingTextで変更できます。
ただしドロップダウンリストの内容がある場合はこれは無視されドロップダウンリストの内容が表示されます。
ローディング状態を有効にするにはドロップダウンリストの内容を空にする必要があります。
ローディング状態が無効でドロップダウンリストが空の場合は「No options」が表示されます。
noOptionsTextで「No options」の文字列を変更できます。
※注意してください。ブール値を渡さなければいけないためloading="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。loadingと書くだけでloading={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
サンプルの1つ目はtrueでドロップダウンリストの中身が空なのでLoading…と表示されます。
2つ目はfalseですがドロップダウンリストの中身が空なのNo optionsと表示されます。
3つ目はtrueですがドロップダウンリストの中身があるのでloading…と表示されずにドロップダウンリストの中身が表示されています。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete loading={true} options={[]} renderInput={(params) => <TextField {...params} label="loadingあり ドロップダウンリストが空" />} />
<Autocomplete loading={false} options={[]} renderInput={(params) => <TextField {...params} label="loadingなし ドロップダウンリストが空" />} />
<Autocomplete loading={true} options={doubutsu} renderInput={(params) => <TextField {...params} label="loadingあり ドロップダウンリストあり" />} />
</div>
, document.getElementById('sample')
);

loadingText

AutocompleteのloadingTextの使い方の説明です。
loadingが有効でドロップダウンリストが空の場合に表示する文字列を設定します。
ちなみに「Loading…」の末尾の「…」はU+2026(…)が使われています。
ノードを設定できるので文字列でなくても構いません。画像でロード中のくるくる回るものを指定しても良いです。
サンプルではloding中の文字列を「ロード中です」にしています。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
ReactDOM.render(
<Autocomplete loading loadingText="ロード中です" options={[]} renderInput={(params) => <TextField {...params} label="loadingText" />} />
, document.getElementById('sample')
);

multiple

Autocompleteのmultipleの使い方の説明です。
multipleは複数選択したいときに設定します。
サンプルで「いぬ」「ねこ」「うさぎ」「たぬき」と順番にドロップダウンリストから選択していってください。選択したものが入力欄に追加されていきます。
入力欄の各項目の右側にある×ボタンを押すと入力欄から削除できます。
limitTagsでフォーカスが外れたときに入力欄に表示する上限数を設定でき一部の表示を非表示にできます。
getLimitTagsTextでフォーカスが外れたときにlimitTags以上の項目数があった場合に入力欄に表示するメッセージを設定できます。
const doubutsu = ['いぬ', 'ねこ', 'うさぎ' ,'たぬき'];
ReactDOM.render(
<Autocomplete multiple={true} options={doubutsu} renderInput={(params) => <TextField {...params} label="multipleで複数選択" />} />
, document.getElementById('sample')
);

noOptionsText

AutocompleteのnoOptionsTextの使い方の説明です。
noOptionsTextはドロップダウンリストの項目が無い時に表示するメッセージを設定します。
デフォルトは「No options」です。
ノードを設定できるので文字列でなくてもかまいません。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
ReactDOM.render(
<Autocomplete noOptionsText="ドロップダウンリストの項目が無いです" options={[]} renderInput={(params) => <TextField {...params} label="noOptionsText" />} />
, document.getElementById('sample')
);

onChange

AutocompleteのonChangeの使い方の説明です。
onChangeは変更があった時に実行したい関数を設定します。
変更があったというのはReactが保持している入力欄の内容が変わった という場合です。
具体的にはドロップダウンリストから項目を選択したときや×ボタンで削除したときです。
ドロップダウンリストを表示したときや入力欄に文字を入力したときは当てはまりません。
関数を設定します。引数にはevent、value、reason、detailsがあります。
reasonには「createOption」、「selectOption」、「removeOption」、「blur」、「clear」が入ります。
ドロップ団リストから選択した場合にreasonには「selectOption」が入ります。
サンプルはonChangeが実行されたら「onChangeが実行された」というアラートを表示します。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<Autocomplete onChange={(event, value, reason, details)=>{alert('onChangeが実行された。value:'+value+', reason:'+reason);}} options={doubutsu} renderInput={(params) => <TextField {...params} label="onChange" />} />
, document.getElementById('sample')
);

onClose

AutocompleteのonCloseの使い方の説明です。
onCloseはドロップダウンリストが閉じられたとき実行したい関数を設定します。
具体的にはドロップダウンリストから項目を選択したときやESCキーを押したときです。
関数を設定します。引数にはevent、reasonがあります。
reasonには「toggleInput」、「escape」、「selectOption」、「removeOption」、「blur」が入ります。
サンプルはonCloseが実行されたら「onCloseが実行された」というアラートを表示します。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<Autocomplete onClose={(event, reason)=>{alert('onCloseが実行された。reason:'+reason);}} options={doubutsu} renderInput={(params) => <TextField {...params} label="onClose" />} />
, document.getElementById('sample')
);

onHighlightChange

AutocompleteのonHighlightChangeの使い方の説明です。
入力欄が変更されたら実行する関数を設定します。
入力欄にフォーカスを当てたとき、入力欄に何か入力される、ドロップダウンリストの上でマウスを移動させてハイライトが変わるとき、キーボードの矢印キー(カーソルキー)を移動させてハイライトが変わるときに実行されます。
関数を設定します。引数にはevent、option、reasonがあります。
reasonには「keyboard」、「auto」、「mouse」が入ります。
サンプルでは入力欄のすぐ上の「(reasonとUNIX時間)」と書かれている場所に実行された際のreasonと実行されるタイミングがわかるようにUNIX時間を表示します。サンプルでフォーカスをあてたりドロップダウンリストからマウスで選択したり、キーボードの矢印キー(カーソルキー)で選択してください。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ', 'うさぎ', 'たぬき'];
ReactDOM.render(
<div>
<div id="IDonHighlightChange">(reasonとUNIX時間)</div>
<Autocomplete onHighlightChange={(event, option, reason)=>{document.getElementById('IDonHighlightChange').innerHTML=reason+Date.now();}} options={doubutsu} renderInput={(params) => <TextField {...params} label="onHighlightChange" />} />
</div>
, document.getElementById('sample')
);

onInputChange

AutocompleteのonInputChangeの使い方の説明です。
ドロップダウンリストのハイライトが変更されたら実行する関数を設定します。
ドロップダウンリストの項目をマウスで選択したとき、キーボードで選択したとき、入力欄の右端の×ボタンを押して入力内容を消去したときに実行されます。
関数を設定します。引数にはevent、value、reasonがあります。
reasonには「input」、「reset」、「clear」が入ります。
サンプルでは入力欄のすぐ上の「(valueとreasonとUNIX時間)」と書かれている場所に実行された際のreasonと実行されるタイミングがわかるようにUNIX時間を表示します。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<div id="IDonInputChange">(valueとreasonとUNIX時間)</div>
<Autocomplete onInputChange={(event, value, reason)=>{document.getElementById('IDonInputChange').innerHTML='value:'+value+', reason:'+reason+Date.now();}} options={doubutsu} renderInput={(params) => <TextField {...params} label="onInputChange" />} />
</div>
, document.getElementById('sample')
);

onOpen

AutocompleteのonOpenの使い方の説明です。
ドロップダウンリストが開いたときに実行する関数を設定します。
サンプルでは入力欄のすぐ上の「(onOpen UNIX時間)」と書かれている場所に実行されるタイミングがわかるようにUNIX時間を表示します。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<div id="IDonOpen">(onOpen UNIX時間)</div>
<Autocomplete onOpen={(event)=>{document.getElementById('IDonOpen').innerHTML='onOpen'+Date.now()}} options={doubutsu} renderInput={(params) => <TextField {...params} label="onOpen" />} />
</div>
, document.getElementById('sample')
);

open

Autocompleteのopenの使い方の説明です。
ドロップダウンリストを開いた状態にします。
このブール値を切り替えることで任意のタイミングでドロップダウンリストの表示・非表示が切り替えられます。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete open={true} options={doubutsu} renderInput={(params) => <TextField {...params} label="open" />} />
</div>
, document.getElementById('sample')
);

openOnFocus

AutocompleteのopenOnFocusの使い方の説明です。
とても分かりづらいです。
Autocompleteにフォーカスしたときにドロップダウンリストを表示するかの設定です。
あくまでもAutocompleteが対象なのでAutocomplete内部に生成されたINPUT要素にフォーカスをするとこの機能は関係なくなります。
つまり中のINPUT要素の領域を除くAutocompleteの領域(だいたい周囲の枠あたりのみ)をクリックしたときに違いが出ます。
※注意してください。ブール値を渡さなければいけないためopenOnFocus="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。openOnFocusと書くだけでopenOnFocus={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
サンプルの入力欄の右側にある▼のさらに下のすみっこをクリックしてみてください。
ありだとドロップダウンリストが表示されますが、なしだとドロップダウンリストが表示されません。
デフォルトはfalseです。
できれば生成した真ん中の入力欄のIUNPUT要素でもこの機能が有効になればよいのですがMUIにはこうしたよくわからない機能がちょいちょいあります。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete openOnFocus={true} options={doubutsu} renderInput={(params) => <TextField {...params} label="openOnFocusあり" />} />
<Autocomplete openOnFocus={false} options={doubutsu} renderInput={(params) => <TextField {...params} label="openOnFocusなし" />} />
</div>
, document.getElementById('sample')
);

openText

AutocompleteのopenTextの使い方の説明です。
入力欄の右側にある▼にマウスを置いたときにポップアップするメッセージを設定できます。
デフォルトは「Open」です。
これは文字列しか指定できません。ノードを設定することはできません。
closeTextで▲状態の閉じるときのメッセージを設定できます。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete openText="ドロップダウンリストを開きます" options={doubutsu} renderInput={(params) => <TextField {...params} label="openTextあり" />} />
<Autocomplete options={doubutsu} renderInput={(params) => <TextField {...params} label="openTextなし" />}  />
</div>
, document.getElementById('sample')
);

PaperComponent

AutocompleteのPaperComponentの使い方の説明です。
ドロップダウンリストを表示するコンポーネントを設定できます。
サンプルでは背景色を薄黄色にして「ドロップダウンリストです」という文字を表示します。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
const TukuttaDropDownList = (props) => (
  <div style={{"backgroundColor":"#ffffdd"}}>
    <div>ドロップダウンリストです</div>
    {props.children}
  </div>
);
ReactDOM.render(
<Autocomplete PaperComponent={TukuttaDropDownList} options={doubutsu} renderInput={(params) => <TextField {...params} label="PaperComponent" />} />
, document.getElementById('sample')
);

PopperComponent

AutocompleteのPopperComponentの使い方の説明です。
AutocompleteのドロップダウンリストはPopperComponentで位置を決めその中でPaperComponentで表示をします。
英語だと見逃してしまうときがあります。ポッパーの中にペーパーです。
その位置を決めるPopperComponent(ポッパー)を指定できます。
サンプルでは下に20px、右に20pxずらして背景色を薄黄色にします。
そしてその中の白い範囲がPaperComponent(ペーパー)です。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
const TukuttaDropDownList = (props) => (
  <div style={{"backgroundColor":"#ffffdd","marginTop":"20px","marginLeft":"20px"}}>
    <div>PopperComponent範囲 上</div>
    {props.children}
    <div>PopperComponent範囲 下</div>
  </div>
);
ReactDOM.render(
<Autocomplete PopperComponent={TukuttaDropDownList} options={doubutsu} renderInput={(params) => <TextField {...params} label="PopperComponent" />} />
, document.getElementById('sample')
);

popupIcon

AutocompleteのpopupIconの使い方の説明です。
入力欄右端の▼のアイコンを設定できます。
デフォルトの未設定はArrowDropDownIconです。
サンプルではちょっと縦長の▼アイコンを作成して設定しています。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const createSvgIcon = MaterialUI.createSvgIcon;
const doubutsu = ['いぬ', 'ねこ'];
const TukuttaIcon = createSvgIcon(
  <path d="M7 5l5 15 5-15z" />,
  '縦長▼',
);
ReactDOM.render(
<Autocomplete popupIcon={<TukuttaIcon />} options={doubutsu} renderInput={(params) => <TextField {...params} label="popupIcon" />} />
, document.getElementById('sample')
);

readOnly

AutocompleteのreadOnlyの使い方の説明です。
読み取り専用にします。
文字の入力も変更も出来ません。
ドロップダウンリストも表示されません。
※注意してください。ブール値を渡さなければいけないためreadOnly="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。readOnlyと書くだけでreadOnly={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
もしreadOnlyが機能しなかったらMUIのバージョンを疑ってください。MUI v5.3.1以前では機能しません。MUI v.5.4.0以上にしてください。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete readOnly={true} defaultValue="いぬ" options={doubutsu} renderInput={(params) => <TextField {...params} label="readOnlyあり" />} />
<Autocomplete readOnly={false} defaultValue="いぬ" options={doubutsu} renderInput={(params) => <TextField {...params} label="readOnlyなし" />} />
</div>
, document.getElementById('sample')
);

renderGroup

AutocompleteのrenderGroupの使い方の説明です。
ドロップダウンリストの項目をgroupByでグループ化したあとにrenderGroupでその表示の設定を行い見た目などを変えます。
サンプルは「ねこ」だった場合に「にゃんこーず」という見出しでグループ化します。詳しくはgroupByを見てください。
そしてグループの見出しは薄黄色に、各項目を水色にしています。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'おやねこ', 'こねこ', 'うさぎ'];
const TukuttaRenderGroup = (params) => {
  return (
    <div key={params.key}>
      <div style={{"backgroundColor":"#ffffdd"}}>『{params.group}』</div>
      <div style={{"backgroundColor":"#ddffff"}}>{params.children}</div>
    </div>
  );
}
ReactDOM.render(
<Autocomplete renderGroup={TukuttaRenderGroup} groupBy={(option)=>option.indexOf('ねこ')>-1?'にゃんこーず':option} options={doubutsu} renderInput={(params) => <TextField {...params} label="renderGroup" />} />
, document.getElementById('sample')
);

renderOption

AutocompleteのrenderOptionの使い方の説明です。
renderOptionでドロップダウンリストの各項目の設定を変更できます。
サンプルでは各項目の背景をピンク色にします。
そして選ばれた項目には「←これ選んでる!」の文字を追加しています。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
const TukuttaRenderOption = (props, option, state) => {
  let eranda = state.selected ? '←これ選んでる!' : '';
  return (
    <li {...props}>
      <span style={{"backgroundColor":"#ffddff"}}>
        {option} {eranda}
      </span>
    </li>
  );
}
ReactDOM.render(
<Autocomplete renderOption={TukuttaRenderOption} options={doubutsu} renderInput={(params) => <TextField {...params} label="renderOption" />} />
, document.getElementById('sample')
);

renderTags

AutocompleteのrenderTagsの使い方の説明です。
複数選択のmultipleで使用します。
renderTagsで入力欄に表示される複数選択された項目の設定ができます。
複数選択された各項目の表示にMUIのChipコンポーネントを使っています。
サンプルでは同じようにChipコンポーネントを使います。ただし各項目の背景をピンク色にします。
必ずChipコンポーネントを使用する必要はありません。独自の四角い表示などにしても良いです。
サンプルの1つ目で「いぬ」と「ねこ」を選択してください。入力欄にピンク色の背景で表示されます。
デフォルトの表示と似せるために×ボタンも表示していますがその機能は実装していません。「いぬ」の横にある×を押しても消えません。
独自に作る場合は×ボタンの処理も含めて全て作る必要があります。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const Chip = MaterialUI.Chip;
const doubutsu = ['いぬ', 'ねこ'];
const TukuttaRenderTags = (value, getTagProps) => {
  const TukuttaChips = value.map( (namae) => <Chip key={namae} label={namae} onDelete={ ()=>alert('削除処理未実装') } style={{"backgroundColor":"#ffdddd","margin":"3px"}} />  );
  return (<div>{TukuttaChips}</div>);
}
ReactDOM.render(
<div>
<Autocomplete renderTags={TukuttaRenderTags} multiple options={doubutsu} renderInput={(params) => <TextField {...params} label="renderOptionあり" />} />
<Autocomplete multiple options={doubutsu} renderInput={(params) => <TextField {...params} label="renderOptionなし" />} /></div>
, document.getElementById('sample')
);

selectOnFocus

AutocompleteのselectOnFocusの使い方の説明です。
入力欄にフォーカスが当たった時に入力欄の文字を全選択します。
デフォルトの値はfreeSoloに依存しfreeSoloとは逆になります。( selectOnFocus = !freeSolo )
freeSoloはデフォルトはfalseです。
つまりselectOnFocusはデフォルトでtrueになります。
※注意してください。ブール値を渡さなければいけないためselectOnFocus="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。selectOnFocusと書くだけでselectOnFocus={true}と同じ意味になります。
freeSoloclearOnBlurselectOnFocus、ドロップダウンリストでHomeキーEndキーが機能するか、ドロップダウンリストの表示表示の右端の▼を表示するか、に影響します。
サンプルで「いぬ」を選んだ後にいったん入力欄からフォーカスを外して再度入力欄にフォーカスを当ててください。trueのほうは「いぬ」が全選択されています。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete selectOnFocus={true} options={doubutsu} renderInput={(params) => <TextField {...params} label="selectOnFocusがtrue" />} />
<Autocomplete selectOnFocus={false} options={doubutsu} renderInput={(params) => <TextField {...params} label="selectOnFocusがfalse" />} />
<Autocomplete selectOnFocus={false} options={doubutsu} renderInput={(params) => <TextField {...params} label="selectOnFocusが未設定でfreeSoloがtrue、つまりfalse" />} />
</div>
, document.getElementById('sample')
);

size

Autocompleteのsizeの使い方の説明です。
Autocompleteの大きさを設定できます。
smallかmedium、もしくは文字列を指定できます。
デフォルトはmediumです。
サンプルの上下を見比べてください。中の方が上下が若干大きくなっているのが分かります。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<div>
<Autocomplete size="smalloptions={doubutsu} renderInput={(params) => <TextField {...params} label="small 小" />} />
<Autocomplete size="mediumoptions={doubutsu} renderInput={(params) => <TextField {...params} label="medium 中" />} />
</div>
, document.getElementById('sample')
);

sx

Autocompleteのsxの使い方の説明です。が他のコンポーネントと共通のプロパティのため別ページにまとめました。
sxの解説に移動してください。

value

Autocompleteのvalueの使い方の説明です。
AutocompleteでReactがコントロールする値を設定します。
React側で管理するのでユーザーが値を変更できません。
コントロールされていない設定はdefaultValueを使います。
サンプルはvalueに「いぬ」がはいっています。ドロップダウンリストで「ねこ」を選んで変更しようとしてください。「ねこ」に変更してもフォーカスを外すと「いぬ」に戻ってしまいます。
const TextField = MaterialUI.TextField;
const Autocomplete = MaterialUI.Autocomplete;
const doubutsu = ['いぬ', 'ねこ'];
ReactDOM.render(
<Autocomplete value="いぬ" options={doubutsu} renderInput={(params) => <TextField {...params} label="value" />} />
, document.getElementById('sample')
);
menu

React 目次

最初に現在のReactについて
世界一シンプルなサンプル
React Router v6
React Router v6 API
MUI v5
sxの解説
マテリアルアイコンの解説
Autocomplete
Avatar
AvatarGroup
Badge
Button
ButtonGroup
Checkbox
Chip
Collapse
Divider
Floating Action Button(Fab)
Fade
FormControlLabel
Grow
Icon
List
ListItem
ListItemAvatar
ListItemButton
ListItemIcon
ListItemSecondaryAction
ListItemText
ListSubheader
Radio
RadioGroup
Rating
Select
Slide
Slider
Switch
TextField
ToggleButton
ToggleButtonGroup
Zoom
エラー対処
HTMl select
戻る

全体目次