Input field with multiple values from autocomplete

[developer-anilpatidar]

is it possible to add multiple value in string type field with autocomplete
like:
column_list: "id;name;email"

I never want to use array type of filed just want to continually add multiple value in a single filed with autocomplete
when start typing id show autocomplete then add ";" then again start typing in the same field such as "name" then autocomplete suggestion will show.

[josdejong]

I think that should be possible, the autocomplete function is quite flexible and customizable: with filter and trigger you can control what to match and when to trigger, see docs on autocomplete (and there are a couple of examples in the /examples folder).

https://github.com/josdejong/jsoneditor/blob/develop/docs/api.md

[developer-anilpatidar]

Perfect, It's working!!
Thanks @josdejong

[josdejong]

Awesome! Thanks for reporting back. I'll close this issue now.

[cpopolo]

@josdejong this is a life-saver, thank you... But I am having trouble trying to implement a pick-list method for restricting a specific node to a limited set of choices. E.g. for a node called 'fruit', how can I limit the autocomplete to only allow ['apple','peach','mango']? But for another node 'pet', the autocomplete list should limit the inputs to ['cat','dog']. In other words, specific lists of allowed inputs for specific nodes. None of the examples seem to clearly explain this to me - can you point me in the right direction?

[josdejong]

@cpopolo you can maybe use a JSON Schema, which can provide an enum dropdown for a limited list of inputs, and shows a warning icon when the value is invalid. See the "gender" dropdown in https://github.com/josdejong/jsoneditor/blob/develop/examples/07_json_schema_validation.html.

[cpopolo]

Thanks Jos, this is working nicely. I'm now deep into the rabbit hole of the 'schema' option which I knew I would need to get to at some point... A quick follow-up question if you can: I've read through the issue #57 about named enumerations and cannot seem to tell if that has been resolved. Is there an accepted way to show a list of enumerated options along with a brief description for each? There are certain fields in my structure that require a short code, but it would be far more helpful if the end-user could see a fuller description. This is an example where I have left it for now, but it neither behaves like a traditional 'enum', nor does it show any helpful 'description' text:

"properties": {
   'iso': {"type" : "string", "enum": ['isone','isony','pjm','miso','spp','ercot','caiso','ieso']},
   'ba': {
         "type": "string", 
         "oneOf": [
            {"const": "isone_nh", "description": "ISONE NH"},
            {"const": "isone_nema", "description": "ISONE North MA"},
             ...this list could be 100+ elements long...
           ]
     },

Thanks

[josdejong]

In JSONEditor, you cannot use oneOf to render an enum with a description or so, it's really just looking at enum. I don't think there is a way to show a description for individual enum values, though you can put a description in the parent of the enum, and then hover the key (fieldname) in JSONEditor to see the description, i.e.

"properties": {
   'iso': {
    "type" : "string",
    "enum": ['isone','isony','pjm','miso','spp','ercot','caiso','ieso'],
    "description": "Choose one of bla bla bla"
   },

[cpopolo]

I see... The problem is that the "ba" list of options in my example can be quite long. I wonder if it's possible to build a render callback that would make the "enum" behave more like a element in HTML; where the option values are stored into the JSON, but the user sees a more useful list of descriptions. E.g., ISO New England NH... The JSON value would be set to "isone_nh" but the user selected "ISO New England NH" from the dropdown list. Perhaps an experiment for another day - you've been more than enough help already!

[josdejong]

Yeah I understand.

The successor of this library, svelte-jsoneditor, allows writing your own component to render a value (depending on the conditions). There is an example here on how to render a ReadonlyPassword and use the built-in EnumValue component to render a dropdown (without needing JSON schema). You can just as easily create your own enum component with dynamic description (maybe with an info icon on the right side or so).