React frontend - Building an autocomplete input-CodePudding

I've been researching online and got a lot of resources on how to implement an autocomplete input field. However, all of them are examples of autocomplete for a list of words. I'm trying to build a autocomplete based on a list of objects. So the basic idea would be when users want to see a recommended list of the fields in an object when they type a dot. For example, I have an object below:

const myObj = {
  field1: "value1",
  field2: 10,
  field3: {
    nestedField1: "nestedValue1",
    ...
  }
}

So in an input, I can do something like "myObj.", and it will have a list of suggested fields to let users choose. Does anyone have any idea on how to implement this kind of autocomplete? Or if there is any source related to this kind of project, it would be much appreciated if you could share with me. Thanks in advance.

CodePudding user response：

We used Material UI for something similar, take a look: https://mui.com/material-ui/react-autocomplete/, also if you required something very particular, you can implement yourself without any other library.

Best of luck