You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@airavata.apache.org by "Marcus Christie (Jira)" <ji...@apache.org> on 2020/04/17 19:55:00 UTC

[jira] [Updated] (AIRAVATA-3324) Custom input editor: autocomplete input editor

     [ https://issues.apache.org/jira/browse/AIRAVATA-3324?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Marcus Christie updated AIRAVATA-3324:
--------------------------------------
    Description: 
Create an autocomplete input editor that allows user to type and get autocompleted matching results in a dropdown. Selecting a dropdown item populates the input editor with that value.

The frontend component will make HTTP requests to a configured URL to fetch matching results for the currently entered search string. It's up to the backed URL to determine from where to get the matching results, for example, it could retrieve them from a database or file or a third party service.

h3. Configuring autocomplete input editor

{code}
{
    "editor": {
        "ui-component-id": "autocomplete-input-editor",
        "config": {
            "url": "/custom/search/"
        }
    }
}
{code}

h3. Backend URL contract

- URL is called with query parameter {{search}} with value of whatever the user has currently typed
- URL should return a JSON response with a {{search}} key and the value of that key used for the search and an {{results}} key with a list matching results, limited to the top 10. Each result should have a {{text}} key with the text displayed to the user and a {{value}} key which is the value applied to the experiment input if selected. For example:
{code}
{
  "search": "mammal",
  "results": [
    {
      "text": "Horse",
      "value": "horse"
    },
    {
      "text": "Mouse",
      "value": "mouse"
    }
  ]
}
{code}

h5. TODO

- [ ] Load search results as user types


  was:
Create an autocomplete input editor that allows user to type and get autocompleted matching results in a dropdown. Selecting a dropdown item populates the input editor with that value.

The frontend component will make HTTP requests to a configured URL to fetch matching results for the currently entered search string. It's up to the backed URL to determine from where to get the matching results, for example, it could retrieve them from a database or file or a third party service.

h3. Configuring autocomplete input editor

{code}
{
    "editor": {
        "ui-component-id": "autocomplete-input-editor",
        "config": {
            "url": "/custom/search/"
        }
    }
}
{code}

h3. Backend URL contract

- URL is called with query parameter {{search}} with value of whatever the user has currently typed
- URL should return a JSON response with a {{search}} key and the value of that key used for the search and an {{results}} key with a list matching results, limited to the top 10. Each result should have a {{text}} key with the text displayed to the user and a {{value}} key which is the value applied to the experiment input if selected. For example:
{code}
{
  "search": "mammal",
  "results": [
    {
      "text": "Horse",
      "value": "horse"
    },
    {
      "text": "Mouse",
      "value": "mouse"
    }
  ]
}
{code}


> Custom input editor: autocomplete input editor
> ----------------------------------------------
>
>                 Key: AIRAVATA-3324
>                 URL: https://issues.apache.org/jira/browse/AIRAVATA-3324
>             Project: Airavata
>          Issue Type: New Feature
>          Components: Django Portal
>            Reporter: Marcus Christie
>            Assignee: Marcus Christie
>            Priority: Major
>
> Create an autocomplete input editor that allows user to type and get autocompleted matching results in a dropdown. Selecting a dropdown item populates the input editor with that value.
> The frontend component will make HTTP requests to a configured URL to fetch matching results for the currently entered search string. It's up to the backed URL to determine from where to get the matching results, for example, it could retrieve them from a database or file or a third party service.
> h3. Configuring autocomplete input editor
> {code}
> {
>     "editor": {
>         "ui-component-id": "autocomplete-input-editor",
>         "config": {
>             "url": "/custom/search/"
>         }
>     }
> }
> {code}
> h3. Backend URL contract
> - URL is called with query parameter {{search}} with value of whatever the user has currently typed
> - URL should return a JSON response with a {{search}} key and the value of that key used for the search and an {{results}} key with a list matching results, limited to the top 10. Each result should have a {{text}} key with the text displayed to the user and a {{value}} key which is the value applied to the experiment input if selected. For example:
> {code}
> {
>   "search": "mammal",
>   "results": [
>     {
>       "text": "Horse",
>       "value": "horse"
>     },
>     {
>       "text": "Mouse",
>       "value": "mouse"
>     }
>   ]
> }
> {code}
> h5. TODO
> - [ ] Load search results as user types



--
This message was sent by Atlassian Jira
(v8.3.4#803005)