nextui
nextui copied to clipboard
nextui-org
[Feature Request] Autocomplete with Multiple Selections Feature or Multiple Select with Autocomplete Filtering
Is your feature request related to a problem? Please describe.
Users of my application need the ability to select multiple options from an autocomplete field. Currently, Next UI provides an Autocomplete component that allows for a single selection with suggestions and a Select component that allows multiple selections but without autocomplete functionality. Merging these features would greatly enhance user experience.
Describe the solution you'd like
I would like the Autocomplete component to include a multiple attribute, allowing multiple selections with autocomplete suggestions, similar to the current Select component's multiple selection feature. Alternatively, the Select component could be enhanced with an autocomplete input to filter options as the user types.
Describe alternatives you've considered
As a workaround, we could use third-party libraries to achieve this functionality, but a native solution from Next UI would be ideal for consistency and to avoid additional dependencies.
Screenshots or Videos
No response
hey, perhaps anyone already created a custom multiselect autocomplete and would like share? 👀
hey, perhaps anyone already created a custom multiselect autocomplete and would like share? 👀
Check: ReactSelect
Im having the same issue i think i will use the headless ui one with nextui componets https://headlessui.com/react/combobox#selecting-multiple-values
It seems like passing these down to the listbox should work, but no luck.
<Autocomplete
listboxProps={{
selectionMode: 'multiple',
selectedKeys: selectedKeys,
onSelectionChange: setSelectedKeys
}}
Here's an elegant approach that I came up with using NextUI's Dropdown component :
1. Structure:
Use NextUI's Dropdown component as the base.
Utilize the Dropdown's built-in multiple selection feature.
Implement two sections within the DropdownMenu:
a. A search input section (non-selectable)
b. A filterable list of selectable items
2. Implementation:
import { Dropdown, DropdownTrigger, DropdownMenu, DropdownSection, DropdownItem, Button, Input, Avatar } from "@nextui-org/react";
import { ChevronDownIcon } from "@your-icon-library";
import { useState, useMemo } from "react";
const MultiSelectAutocompleteDropdown = ({ users }) => {
const [selectedKeys, setSelectedKeys] = useState(new Set([]));
const [searchQuery, setSearchQuery] = useState("");
// Filter users based on search query
const filteredUsers = useMemo(() => {
return users.filter((user) =>
user.name.toLowerCase().includes(searchQuery.toLowerCase())
);
}, [users, searchQuery]);
// Handle search input changes
const handleSearchChange = (e) => {
setSearchQuery(e.target.value);
};
// Generate display value for the button
const selectedValue = useMemo(() => {
const selected = Array.from(selectedKeys);
return selected.length > 0
? `${selected.length} selected`
: "Select member";
}, [selectedKeys]);
return (
<div>
<p className="text-sm pb-2">Assign to</p>
<Dropdown>
<DropdownTrigger>
<Button
className="max-w-full"
endContent={<ChevronDownIcon className="text-small" />}
variant="bordered"
>
{selectedValue}
</Button>
</DropdownTrigger>
<DropdownMenu
aria-label="Multiple selection with search"
variant="flat"
closeOnSelect={false}
disallowEmptySelection
selectionMode="multiple"
selectedKeys={selectedKeys}
onSelectionChange={setSelectedKeys}
>
<DropdownSection>
<DropdownItem key="search" isReadOnly>
<Input
placeholder="Search..."
value={searchQuery}
onChange={handleSearchChange}
fullWidth
/>
</DropdownItem>
</DropdownSection>
<DropdownSection>
{filteredUsers.map((user) => (
<DropdownItem key={user.id}>
<div className="flex gap-2 items-center">
<Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
<div className="flex flex-col">
<span className="text-small">{user.name}</span>
<span className="text-tiny text-default-400">{user.email}</span>
</div>
</div>
</DropdownItem>
))}
</DropdownSection>
</DropdownMenu>
</Dropdown>
</div>
);
};