# Autocomplete Поле ввода с подсказками в выпадающем списке. Props (свойства) для компонента Autocomplete: [{"name":"defaultValue","type":{"name":"string"}},{"name":"onScroll","type":{"name":"(((e: UIEvent<HTMLElement, UIEvent>) => void) & UIEventHandler<HTMLInputElement>)"}},{"name":"value","type":{"name":"string"}},{"name":"contentLeft","type":{"name":"ReactElement<any, string | JSXElementConstructor<any>>"}},{"name":"contentRight","type":{"name":"ReactElement<any, string | JSXElementConstructor<any>>"}},{"name":"clear","type":{"name":"boolean"}},{"name":"label","type":{"name":"string"}},{"name":"filter","type":{"name":"((data: T) => boolean)"}},{"name":"required","type":{"name":"boolean"}},{"name":"textBefore","type":{"name":"string"}},{"name":"textAfter","type":{"name":"string"}},{"name":"zIndex","type":{"name":"ZIndex"}},{"name":"listMaxHeight","type":{"name":"string"}},{"name":"listWidth","type":{"name":"string"}},{"name":"portal","type":{"name":"string | RefObject<HTMLElement>"}},{"name":"renderItem","type":{"name":"((item: T) => ReactNode)"}},{"name":"beforeList","type":{"name":"ReactNode"}},{"name":"afterList","type":{"name":"ReactNode"}},{"name":"virtual","type":{"name":"boolean"}},{"name":"keepPlaceholder","type":{"name":"boolean"}},{"name":"requiredPlacement","type":{"name":"enum","raw":"\"right\" | \"left\"","value":[{"value":"\"right\""},{"value":"\"left\""}]}},{"name":"optional","type":{"name":"boolean"}},{"name":"hasRequiredIndicator","type":{"name":"boolean"}},{"name":"hintText","type":{"name":"string"}},{"name":"hintTrigger","type":{"name":"enum","raw":"\"hover\" | \"click\"","value":[{"value":"\"hover\""},{"value":"\"click\""}]}},{"name":"hintTargetIcon","type":{"name":"ReactNode"}},{"name":"hintTargetPlacement","type":{"name":"enum","raw":"\"outer\" | \"inner\"","value":[{"value":"\"outer\""},{"value":"\"inner\""}]}},{"name":"hintPlacement","type":{"name":"Placement | ComputedPlacement[]"}},{"name":"hintHasArrow","type":{"name":"boolean"}},{"name":"hintOffset","type":{"name":"[number, number]"}},{"name":"hintWidth","type":{"name":"string"}},{"name":"hintContentLeft","type":{"name":"ReactNode"}},{"name":"leftHelper","type":{"name":"ReactNode"}},{"name":"hasDivider","type":{"name":"boolean"}},{"name":"titleCaption","type":{"name":"ReactNode"}},{"name":"onSearch","type":{"name":"(((value: string, event?: KeyboardEvent<HTMLInputElement>) => void) & ((value: string, event?: KeyboardEvent<HTMLInputElement>) => void)) | undefined"}},{"name":"suggestions","type":{"name":"T[]"}},{"name":"threshold","type":{"name":"number"}},{"name":"onSuggestionSelect","type":{"name":"((data: T) => void)"}},{"name":"renderList","type":{"name":"((data?: T[]) => ReactNode)"}},{"name":"renderListEnd","type":{"name":"(() => ReactNode)"}},{"name":"flip","type":{"name":"boolean"}},{"name":"disabled","type":{"name":"boolean"}},{"name":"view","type":{"name":"enum","raw":"\"default\" | \"positive\" | \"warning\" | \"negative\"","value":[{"value":"\"default\""},{"value":"\"positive\""},{"value":"\"warning\""},{"value":"\"negative\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"s\" | \"l\" | \"xs\"","value":[{"value":"\"m\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""}]}},{"name":"readOnly","type":{"name":"boolean"}},{"name":"labelPlacement","type":{"name":"enum","raw":"\"outer\" | \"inner\"","value":[{"value":"\"outer\""},{"value":"\"inner\""}]}},{"name":"hintView","type":{"name":"enum","raw":"\"default\"","value":[{"value":"\"default\""}]}},{"name":"hintSize","type":{"name":"enum","raw":"\"m\" | \"s\"","value":[{"value":"\"m\""},{"value":"\"s\""}]}}] ## Использование Расширенная версия компонента  `TextField` . Добавилась возможность использования выпадающего списка с подсказками. По умолчанию подсказки фильтруются вне зависимости от регистра. Но это можно изменить, прокинув свой коллбэк  `filter` . Все пропсы, которые поддерживает компонент  `TextField`  также поддерживаются и здесь.
Формат подсказок  `suggestions`  следующий: ```tsx
type SuggestionItem = {
/**
* Метка-подпись к подсказке
*/
label: string;
/**
* Слот для контента слева
*/
contentLeft?: ReactNode;
/**
* Слот для контента справа
*/
contentRight?: ReactNode;
};
```