Multiple choices
To allow multiple choices, enable allow_multiple flag.
To allow creation of new elements, that are not present in the autocomplete
source, enable allow_new flag. Some implementations may have
restrictions for this flag, like native CKAN's autocomplete that allows
allow_new only in combination with allow_multiple and
remote source.
When multiple values are allowed, result can be sent to the server either
as an array of choices, or as a single comma-separated string. The actual
choice depends on implementations, but you may be able to enforce specific
behavior by setting joined flag. It's not enforced, but
themes are adviced to sent data as array when the flag is disabled, and as
a comma-separated string when it's enabled.
Due to implementation details, specific combinations of flags may be not
supported by the autocomplete widget. All forms below have allow_multiple anabled
and combined with different set of other options. Chose few options and
submit the field to see whether this specific cobmination of settings work
and produce expected result.
{%- call ui.util.call(show_example) -%}
{%- raw %}
{% set value = request.args.getlist("static-single-strict") -%}
{% if value|length == 1 %}{% set value = value|first %}{% endif %}
Submitted value: {{ value }}
{%- call ui.util.call(ui.form) -%}
{{ ui.autocomplete(name="static-single-strict",
label="Static, joined=true, allow_new=false", selected=value,
allow_multiple=true,
joined=true,
allow_new=false, options=[
{"value": "Alpha"},
{"value": "Beta"},
{"value": "Gamma"},
{"value": "Delta"},
]) }}
{{ ui.form_actions(ui.button("Submit", type="submit")) }}
{%- endcall %}
{%- endraw %}
{%- endcall %}
{%- call ui.util.call(show_example) -%}
{%- raw %}
{% set value = request.args.getlist("static-single") -%}
{% if value|length == 1 %}{% set value = value|first %}{% endif %}
Submitted value: {{ value }}
{%- call ui.util.call(ui.form) -%}
{{ ui.autocomplete(name="static-single",
label="Static, joined=true, allow_new=true", selected=value,
allow_multiple=true,
joined=true,
allow_new=true, options=[
{"value": "Alpha"},
{"value": "Beta"},
{"value": "Gamma"},
{"value": "Delta"},
]) }}
{{ ui.form_actions(ui.button("Submit", type="submit")) }}
{%- endcall %}
{%- endraw %}
{%- endcall %}
{%- call ui.util.call(show_example) -%}
{%- raw %}
{% set value = request.args.getlist("static-multi-strict") -%}
{% if value|length == 1 %}{% set value = value|first %}{% endif %}
Submitted value: {{ value }}
{%- call ui.util.call(ui.form) -%}
{{ ui.autocomplete(name="static-multi-strict",
label="Static, joined=false, allow_new=false", selected=value,
allow_multiple=true,
joined=false,
allow_new=false, options=[
{"value": "Alpha"},
{"value": "Beta"},
{"value": "Gamma"},
{"value": "Delta"},
]) }}
{{ ui.form_actions(ui.button("Submit", type="submit")) }}
{%- endcall %}
{%- endraw %}
{%- endcall %}
{%- call ui.util.call(show_example) -%}
{%- raw %}
{% set value = request.args.getlist("static-multi") -%}
{% if value|length == 1 %}{% set value = value|first %}{% endif %}
Submitted value: {{ value }}
{%- call ui.util.call(ui.form) -%}
{{ ui.autocomplete(name="static-multi",
label="Static, joined=false, allow_new=true", selected=value,
allow_multiple=true,
joined=false,
allow_new=true, options=[
{"value": "Alpha"},
{"value": "Beta"},
{"value": "Gamma"},
{"value": "Delta"},
]) }}
{{ ui.form_actions(ui.button("Submit", type="submit")) }}
{%- endcall %}
{%- endraw %}
{%- endcall %}
{%- call ui.util.call(show_example) -%}
{%- raw %}
{% set value = request.args.getlist("remote-single-strict") -%}
{% if value|length == 1%}{% set value = value|first %}{% endif %}
Submitted value: {{ value }}
{%- call ui.util.call(ui.form) -%}
{{ ui.autocomplete(name="remote-single-strict",
label="Remote, joined=true, allow_new=false", selected=value,
allow_multiple=true,
joined=true,
allow_new=false, source=h.url_for("api.dataset_autocomplete", incomplete="?"), id_key="name") }}
{{ ui.form_actions(ui.button("Submit", type="submit")) }}
{%- endcall %}
{%- endraw %}
{%- endcall %}
{%- call ui.util.call(show_example) -%}
{%- raw %}
{% set value = request.args.getlist("remote-single") -%}
{% if value|length == 1%}{% set value = value|first %}{% endif %}
{% if value|length == 1 %}{% set value = value|first %}{% endif %}
Submitted value: {{ value }}
{%- call ui.util.call(ui.form) -%}
{{ ui.autocomplete(name="remote-single",
label="Remote, joined=true, allow_new=true", selected=value,
allow_multiple=true,
joined=true,
allow_new=true, source=h.url_for("api.dataset_autocomplete", incomplete="?"), id_key="name") }}
{{ ui.form_actions(ui.button("Submit", type="submit")) }}
{%- endcall %}
{%- endraw %}
{%- endcall %}
{%- call ui.util.call(show_example) -%}
{%- raw %}
{% set value = request.args.getlist("remote-multi-strict") -%}
{% if value|length == 1%}{% set value = value|first %}{% endif %}
{% if value|length == 1 %}{% set value = value|first %}{% endif %}
Submitted value: {{ value }}
{%- call ui.util.call(ui.form) -%}
{{ ui.autocomplete(name="remote-multi-strict",
label="Remote, joined=false, allow_new=false", selected=value,
allow_multiple=true,
joined=false,
allow_new=false, source=h.url_for("api.dataset_autocomplete", incomplete="?"), id_key="name") }}
{{ ui.form_actions(ui.button("Submit", type="submit")) }}
{%- endcall %}
{%- endraw %}
{%- endcall %}
{%- call ui.util.call(show_example) -%}
{%- raw %}
{% set value = request.args.getlist("remote-multi") -%}
{% if value|length == 1%}{% set value = value|first %}{% endif %}
{% if value|length == 1 %}{% set value = value|first %}{% endif %}
Submitted value: {{ value }}
{%- call ui.util.call(ui.form) -%}
{{ ui.autocomplete(name="remote-multi",
label="Remote, joined=false, allow_new=true", selected=value,
allow_multiple=true,
joined=false,
allow_new=true, source=h.url_for("api.dataset_autocomplete", incomplete="?"), id_key="name") }}
{{ ui.form_actions(ui.button("Submit", type="submit")) }}
{%- endcall %}
{%- endraw %}
{%- endcall %}