AutoComplete with grouplist

[ksankumar]

Is it possible to make it like this with autoComplete?

[zkuzmic]

The current implementation of Autocomplete doesn't allow for grouping items within unfortunately.

[ksankumar]

Any other alternative way to render the list items with key pairs?

Example: [{name: 'item 1'}, {name: 'item 2'}, {name: 'item 3'}]

[zkuzmic]

Sure, you can do that. You need to provide an itemToString function as well in that case:

<Autocomplete
  onChange={(changedItem) => console.log(changedItem)}
  items={[{ name: "item 1" }, { name: "item 2" }, { name: "item 3" }]}
  itemToString={(item) => (item ? item.name : "")}
>
  {(props) => {
    const { getInputProps, getRef } = props;
    return (
      <TextInput placeholder="Fruits" ref={getRef} {...getInputProps()} />
    );
  }}
</Autocomplete>

[ksankumar]

Thanks, @zkuzmic.This really helpful. But my item list contains images and names.

[{name: 'item 1', image: 'url'}, {name: 'item 2', image: 'url'}, {name: 'item 3', image: 'url'}]

So want to paint the item with the image.

Almost similar to what I attached in NY screenshot

[zkuzmic]

Ah gotcha, here's a codesandbox for how I'd accomplish that:

https://codesandbox.io/s/goofy-water-3qfyzi?file=/src/App.tsx

[ksankumar]

Hi @zkuzmic ,

I m trying to build autocomplete with group list and made it almost. But I m getting some errors when I try to select an item.

https://codesandbox.io/s/evergreen-autocomplete-mgrt8h?file=/index.js

Can you please, guide me to solve it.

[ksankumar]

Here is some issue if going with the below data.

const items = [
  { name: "item 1", img: "img1" },
  { name: "item 2", img: "img2" },
  { name: "item 2", img: "img3" }
];

In the above list, we have 2 items with has the same name. Now how do we solve with itemToString?

If itemToString filter with img, however, I want to show the name in inputBox.

This is my exact issue

[brandongregoryscott]

Hi @ksankumar - unfortunately I think you're at the mercy of itemToString to serve as the "unique selector" function for your items right now.

1345 expands the ability of the Autocomplete to pass through the item object (not just stringify'd) to renderItem, which would give you more control over how to render the individual item. We haven't really needed this additional functionality yet so we haven't merged it in.

I hacked together an example of how you might be able to concatenate an id or some other piece of data to the display name and then split it out with a custom renderItem function. This isn't ideal, but it might get you where you need to be. https://codesandbox.io/s/evergreen-issues-1411-5w9b1f?file=/src/App.tsx