Closed ksankumar closed 2 years ago
The current implementation of Autocomplete
doesn't allow for grouping items within unfortunately.
Any other alternative way to render the list items with key pairs?
Example: [{name: 'item 1'}, {name: 'item 2'}, {name: 'item 3'}]
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>
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
Ah gotcha, here's a codesandbox for how I'd accomplish that:
https://codesandbox.io/s/goofy-water-3qfyzi?file=/src/App.tsx
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.
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
Hi @ksankumar - unfortunately I think you're at the mercy of itemToString
to serve as the "unique selector" function for your items right now.
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
Is it possible to make it like this with autoComplete?