オートコンプリートは、推奨オプションのパネルによって強化された通常のテキスト入力です。
The widget is useful for setting the value of a single-line textbox in one of two types of scenarios: 1. The value for the textbox must be chosen from a predefined set of allowed values, e.g., a location field must contain a valid location name: [combo box](#combo-box). 2. The textbox may contain any arbitrary value, but it is advantageous to suggest possible values to the user, e.g., a search field may suggest similar or previous searches to save the user time: [free solo](#free-solo). It's meant to be an improved version of the "react-select" and "downshift" packages. ## Combo box The value must be chosen from a predefined set of allowed values. {{"demo": "pages/components/autocomplete/ComboBox.js"}} ### Playground Each of the following examples demonstrate one feature of the Autocomplete component. {{"demo": "pages/components/autocomplete/Playground.js"}} ### Country select Choose one of the 248 countries. {{"demo": "pages/components/autocomplete/CountrySelect.js"}} ### Controllable states The component has two states that can be controlled: 1. the "value" state with the `value`/`onChange` props combination. This state represents the value selected by the user, for instance when pressing Enter. 2. the "input value" state with the `inputValue`/`onInputChange` props combination. This state represents the value displayed in the textbox. > ⚠️ These two state are isolated, they should be controlled independently. {{"demo": "pages/components/autocomplete/ControllableStates.js"}} ## Free solo Set `freeSolo` to true so the textbox can contain any arbitrary value. ### Search input The prop is designed to cover the primary use case of a **search input** with suggestions, e.g. Google search or react-autowhatever. {{"demo": "pages/components/autocomplete/FreeSolo.js"}} ### Creatable If you intend to use this mode for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting: - `selectOnFocus` to helps the user clear the selected value. - `clearOnBlur` to helps the user to enter a new value. - `handleHomeEndKeys` to move focus inside the popup with the Home and End keys. - A last option, for instance `Add "YOUR SEARCH"`. {{"demo": "pages/components/autocomplete/FreeSoloCreateOption.js"}} You could also display a dialog when the user wants to add a new value. {{"demo": "pages/components/autocomplete/FreeSoloCreateOptionDialog.js"}} ## Grouped {{"demo": "pages/components/autocomplete/Grouped.js"}} ## Disabled options {{"demo": "pages/components/autocomplete/DisabledOptions.js"}} ## `useAutocomplete` For advanced customization use cases, we expose a `useAutocomplete()` hook. It accepts almost the same options as the Autocomplete component minus all the props related to the rendering of JSX. The Autocomplete component uses this hook internally. ```jsx import useAutocomplete from '@material-ui/lab/useAutocomplete'; ``` - [4.5 kB gzipped](/size-snapshot). {{"demo": "pages/components/autocomplete/UseAutocomplete.js", "defaultCodeOpen": false}} ### Customized hook {{"demo": "pages/components/autocomplete/CustomizedHook.js"}} Head to the [Customized Autocomplete](#customized-autocomplete) section for a customization example with the `Autocomplete` component instead of the hook. ## Asynchronous requests {{"demo": "pages/components/autocomplete/Asynchronous.js"}} ### Google Maps place A customized UI for Google Maps Places Autocomplete. {{"demo": "pages/components/autocomplete/GoogleMaps.js"}} For this demo, we need to load the [Google Maps JavaScript](https://developers.google.com/maps/documentation/javascript/tutorial) API. > ⚠️ Before you can start using the Google Maps JavaScript API, you must sign up and create a billing account. ## Multiple values Also known as tags, the user is allowed to enter more than one value. {{"demo": "pages/components/autocomplete/Tags.js"}} ### Fixed options In the event that you need to lock certain tag so that they can't be removed in the interface, you can set the chips disabled. {{"demo": "pages/components/autocomplete/FixedTags.js"}} ### Checkboxes {{"demo": "pages/components/autocomplete/CheckboxesTags.js"}} ### Limit tags You can use the `limitTags` prop to limit the number of displayed options when not focused. {{"demo": "pages/components/autocomplete/LimitTags.js"}} ## サイズ Fancy smaller inputs? `size`propを使用します。 {{"demo": "pages/components/autocomplete/Sizes.js"}} ## Customizations ### Custom input The `renderInput` prop allows you to customize the rendered input. The first argument of this render prop contains props that you need to forward. Pay specific attention to the `ref` and `inputProps` keys. {{"demo": "pages/components/autocomplete/CustomInputAutocomplete.js"}} ### GitHub's picker This demo reproduces the GitHub's label picker: {{"demo": "pages/components/autocomplete/GitHubLabel.js"}} Head to the [Customized hook](#customized-hook) section for a customization example with the `useAutocomplete` hook instead of the component. ## Highlights The following demo relies on [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), a small (1 kB) utility for highlighting text in autosuggest and autocomplete components. {{"demo": "pages/components/autocomplete/Highlights.js"}} ## Custom filter The component exposes a factory to create a filter method that can provided to the `filterOptions` prop. You can use it to change the default option filter behavior. ```js import { createFilterOptions } from '@material-ui/lab/Autocomplete'; ``` ### `createFilterOptions(config) => filterOptions` #### 引数 1. `config` (*Object* [optional]): - `config.ignoreAccents` (*Boolean* [optional]): Defaults to `true`. Remove diacritics. - `config.ignoreCase` (*Boolean* [optional]): Defaults to `true`. Lowercase everything. - `config.limit` (*Number* [optional]): Default to null. Limit the number of suggested options to be shown. For example, if `config.limit` is `100`, only the first `100` matching options are shown. It can be useful if a lot of options match and virtualization wasn't set up. - `config.matchFrom` (*'any' | 'start'* [optional]): Defaults to `'any'`. - `config.stringify` (*Func* [optional]): Controls how an option is converted into a string so that it can be matched against the input text fragment. - `config.trim` (*Boolean* [optional]): Defaults `false`. Remove trailing spaces. #### 戻り値 `filterOptions`: the returned filter method can be provided directly to the `filterOptions` prop of the `Autocomplete` component, or the parameter of the same name for the hook. In the following demo, the options need to start with the query prefix: ```js const filterOptions = createFilterOptions({ matchFrom: 'start', stringify: option => option.title, });