Как настроить выпадающее меню

Question

Мне интересно определить, возможно ли для меня полностью настроить раскрывающийся список, который появляется в ответ на ввод текста пользователем в текстовое поле select2 (с использованием компонентаact-select).

Я хочу, чтобы текст генерировал вывод, аналогичный тому, который появляется в функции Apple Spotlight OS (см. Снимок экрана, на котором я набрал текст 'mini').

Возможно ли это с помощьюact-select, и если да, то как? Есть образцы?

Я нашел этот репо (https://github.com/bvaughn/react-virtualized-select/), который, кажется, поддерживает то, что я хочу, но больше не поддерживается.

Спасибо Dave

Answer 1

Конечно, вы можете настроить содержимое раскрывающегося списка с помощью frameworks , встроенного в react-select.Вы должны перезаписать компонент Menu, чтобы добавить новый контент в выпадающий список.Вам также может потребоваться установить некоторые стили с помощью styles api .

const Menu = ({ children , ...props }) => {
    return <components.Menu>
        <div> My custom content </div>
        {children} // This contains the `MenuList` component with the options
    </components.Menu>
}

<Select
    { ... }
    components={{
        Menu
    }}
/>

Чтобы достичь чего-то вроде функции Apple Spotlight, вам нужно выполнить более продвинутую настройку. Этот пример показывает базовую реализацию того, как вы могли бы это сделать.