[Feature Request] Select component with textfield filter

[cmoscosoz]

Is your feature request related to a problem? Please describe.

For longer list is hard to find items.

Describe the solution you'd like

the new select item is cool. it would be awesome if could be a search text input like react-select library.

Describe alternatives you've considered

text input to filter select items.

Screenshots or Videos

something like this:

[Jkayed]

If no one is working on this I'd love to start working on it.

[jrgarciadev]

Hey @Yuroq thank you!, however, we're already working on it

[nikooiko]

Is there an ETA for this? Is there somewhere we can assist?

[wehrhaus]

Please let me know if you'd like an assist on getting this shipped! Really looking forward to this feature!

[jrgarciadev]

Use the Autocomplete component https://nextui.org/docs/components/autocomplete component.

[simPod]

It does not have selectionMode multiple

[sbc640964]

@jrgarciadev There is a fundamental change in perception between Autocompletion and searching in a Select field.

Selecting AutoComplete changes the input value to the selected value.
Which should not happen in a normal selection field that allows filtering values.

The above issue causes performance issues mainly when using a list from an asynchronous source.

I use with react-aria's useAsyncList as you suggest here https://nextui.org/docs/components/autocomplete#asynchronous-filtering

If you take the example component that you put in the documentation above and just add a value control to it:

import React, {useState} from "react";
import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
import {useAsyncList} from "@react-stately/data";

export default function App() {
  const [value, setValue] = useState('');
 
 let list = useAsyncList({
    async load({signal, filterText}) {
      let res = await fetch(`https://swapi.py4e.com/api/people/?search=${filterText}`, {signal});
      let json = await res.json();

      return {
        items: json.results,
      };
    },
  });

  return (
    <Autocomplete
      className="max-w-xs"
      inputValue={list.filterText}
      isLoading={list.isLoading}
      items={list.items}
      label="Select a character"
      placeholder="Type to search..."
      variant="bordered"
      onInputChange={list.setFilterText}
      onSelectionChange={setValue}
      selectedKey={value}
    >
      {(item) => (
        <AutocompleteItem key={item.name} className="capitalize">
          {item.name}
        </AutocompleteItem>
      )}
    </Autocomplete>
  );
}

• First, you will see that after selection the value is not captured in the field.
• Second, with each selection of the value, a call is again made to the API and additional and unnecessary filtering is performed according to the value of the full label of the selected item.

It's also impossible to select a multiple choice, and actually you can't personally format the value, and this is a result of the fact that you are using a real text field...

Hope I understood, and would like to receive a better offer or a more successful solution...

[pankaj0089]

Hi, were you able to find a solution for this requirement?

[duonghungkiet]

Does anyone have a solution for this function?

[user72356]

Quite disappointing that this isn't a feature and that @Jkayed wanted to contribute and was shut down.

[AkhtarZaman7]

This example might help @duonghungkiet @user72356

export default function FruitSelector() {
  const allFruits = ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango', 'Pineapple'];
  const [input, setInput] = useState('');
  const [selectedFruits, setSelectedFruits] = useState<Array<string>>([]);

  const filteredFruits = useMemo(
    () =>
      allFruits.filter((fruit) =>
        fruit.toLowerCase().includes(input.toLowerCase())
      ),
    [input]
  );

  function handleSelectionChange(keys: SharedSelection) {
    setSelectedFruits(Array.from(keys) as Array<string>);
  }

  return (
    <>
      <Select
        name="fruits"
        aria-label="fruits"
        className="col-span-2"
        selectionMode="multiple"
        placeholder="Select Fruits"
        selectedKeys={selectedFruits}
        onSelectionChange={handleSelectionChange}
        listboxProps={{
          topContent: (
            <Input
              placeholder="Search"
              className="w-full"
              onChange={(e) => {
                setInput(e.target.value);
              }}
            />
          ),
        }}
      >
        {filteredFruits.map((fruit) => (
          <SelectItem key={fruit} classNames={{ title: 'capitalize' }}>
            {fruit}
          </SelectItem>
        ))}
      </Select>

      <div className="mt-4">
        {selectedFruits.map((fruit) => (
          <span key={fruit} className="mr-2 px-2 py-1 bg-gray-200 rounded">
            {fruit}
          </span>
        ))}
      </div>
    </>
  );
}

Screen.Recording.2024-11-12.at.7.54.11.PM.mov

[Hydrion-Qlz]

It really helps me!!! Thanks.

[duonghungkiet]

Thanks @AkhtarZaman7