Shadcn autocomplete - v0 by Vercel

create shadcn autocomplete component

I'll create a shadcn/ui autocomplete component for you using the Combobox component. This component will allow users to search and select from a list of options.

This implementation creates a reusable Autocomplete component using shadcn/ui's Combobox. Here's a breakdown of what we've done:

We've created an Autocomplete component in components/ui/autocomplete.tsx that accepts an array of options, a placeholder, an empty message, and an onSelect callback.
The component uses the Popover, Command, and other shadcn/ui components to create the autocomplete functionality.
In app/page.tsx, we've created an example usage of the Autocomplete component with a list of frameworks as options.
The Autocomplete component allows users to search through the options and select one. When an option is selected, it updates the button text and calls the onSelect callback (if provided) with the selected value.
The component is fully accessible and works with keyboard navigation.

You can customize the Autocomplete component further by adjusting the styles, adding more props for flexibility, or extending its functionality as needed.

To use this component in your project, make sure you have all the necessary shadcn/ui components installed (Button, Command, and Popover). If you haven't installed them yet, you can do so using the shadcn/ui CLI:

npx shadcn@latest add button command popover

This will ensure you have all the required components for the Autocomplete to work correctly.

we should be able to directly type in the main input box, do not populate 'Select a framework' serach bar

I'll modify the Autocomplete component to allow direct typing in the main input box instead of having a separate search bar. This will make the component more intuitive and user-friendly.

Let's update the Autocomplete component to allow direct typing in the main input box:

These changes modify the Autocomplete component to allow direct typing in the main input box. Here's a summary of the modifications:

We replaced the Button with an Input component in the PopoverTrigger.
We removed the separate CommandInput as it's no longer needed.
We updated the filtering logic to filter options based on the user's input.
We adjusted the onSelect logic to set the full selected value.
We added the openOnFocus prop to the Popover to improve usability.

In the example usage, we've also added a state to show the selected framework, demonstrating how the component can be used in a real-world scenario.

To use this updated component, make sure you have the Input component installed from shadcn/ui. If you haven't installed it yet, you can do so using the shadcn/ui CLI:

npx shadcn@latest add input

This implementation allows users to directly type and search in the main input box, providing a more intuitive and streamlined user experience while maintaining the autocomplete functionality.

app

page.tsx