{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "autocomplete",
  "type": "registry:ui",
  "title": "Autocomplete",
  "description": "Free-text input with native typeahead suggestions: <input list> bound to a <datalist>. The browser owns the dropdown, filtering, and selection; htmx can stream a fresh <option> set in on input. The light native sibling of the APG combobox — it suggests, it does not constrain.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/autocomplete.tsx",
      "type": "registry:ui",
      "target": "components/ui/autocomplete.tsx",
      "content": "/** @jsxImportSource hono/jsx */\nimport { cn, type ClassValue } from \"@/registry/lib/cn\"\n\n// Autocomplete — shadcn-htmx, htmx v4 + Tailwind v4.\n//\n// Free-text input with native typeahead suggestions: a real <input list>\n// bound to a <datalist>. The light, native sibling of the APG combobox —\n// where the combobox is a full listbox widget, this is the platform's own\n// \"suggestion list\" affordance with zero behavioural JS of our own.\n//\n// **Native-first.** The browser owns everything:\n//   - the suggestion dropdown UI and its positioning\n//   - substring filtering of <option> values as the user types\n//   - click + Up/Down + Enter selection, Escape to dismiss\n//   - focus management and the implicit listbox role of <datalist>\n// The value is always free text — an autocomplete *suggests*, it does not\n// constrain. (Use <select> / the listbox component when the value must be\n// one of a fixed set.)\n//   See repos/mdn/files/en-us/web/html/reference/elements/datalist/index.md\n//      (\"<datalist> is not a replacement for <select>… The control can still\n//       accept any value that passes validation.\")\n//      repos/mdn/files/en-us/web/html/reference/elements/input/index.md#list\n//      (\"The values provided are suggestions, not requirements.\")\n//\n// htmx wiring (server-streamed suggestions, verified against the vendored\n// v4 source). When `endpoint` is set we point htmx at this input and let the\n// server return a fresh <option> set on each keystroke:\n//   - hx-trigger=\"input changed delay:Nms\" — debounce typing and ignore\n//     no-op keys (arrows). The leading `input` event covers every keystroke.\n//     See repos/htmx/www/src/content/reference/01-attributes/06-hx-trigger.md\n//        (\"Events can be refined with filters and modifiers, e.g.\n//          `input changed delay:1s`\")\n//   - hx-target=\"#<id>-list\" + hx-swap=\"innerHTML\" — swap the new options\n//     straight into the bound <datalist>; the input keeps focus and the\n//     browser re-renders the dropdown from the fresh list transparently.\n//   - hx-sync=\"this:replace\" — abort the in-flight request when the next\n//     keystroke fires so a slow response can never clobber newer suggestions.\n//     See repos/htmx/www/src/content/reference/01-attributes/21-hx-sync.md\n//\n// Style analogues: registry/ui/combobox.tsx (the datalist sibling) and\n// registry/ui/input.tsx / registry/ui/active-search.tsx (the input chrome +\n// the htmx defaults + the .htmx-request dimming convention).\n//\n// No site.js: the dropdown, filtering, and selection are all native; the\n// only JS in play is htmx fetching options. data-slot hooks are for\n// styling/testing only.\n\nexport type AutocompleteOption = { value: string; label?: string }\n\nconst inputBase =\n  \"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none \" +\n  \"selection:bg-primary selection:text-primary-foreground \" +\n  \"placeholder:text-muted-foreground \" +\n  \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 \" +\n  \"md:text-sm dark:bg-input/30 \" +\n  \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 \" +\n  \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 \" +\n  // htmx-request: dim while a suggestion request triggered by this input is\n  // in flight, matching the input/active-search convention.\n  \"[&.htmx-request]:opacity-70\"\n\nexport function autocompleteInputClasses(opts?: { class?: ClassValue }): string {\n  return cn(inputBase, opts?.class)\n}\n\ntype AutocompleteProps = {\n  // The input's id. The <datalist> is `${id}-list`; the default htmx\n  // hx-target points at it, so server-streamed options land in the right list.\n  id: string\n  name?: string\n  // Initial / static suggestions. Server-streamed autocompletes pass [] and\n  // let htmx populate the datalist on input.\n  options?: AutocompleteOption[]\n  placeholder?: string\n  value?: string\n  required?: boolean\n  disabled?: boolean\n  readonly?: boolean\n  autofocus?: boolean\n  // Length bounds the platform enforces on the free-text value.\n  minLength?: number\n  maxLength?: number\n  // Debounce window for the `input` trigger when `endpoint` is set. Default 200ms.\n  delay?: number\n  // Convenience: when set, wires the standard server-streaming defaults\n  //   hx-get={endpoint} hx-trigger=\"input changed delay:${delay}ms\"\n  //   hx-target=\"#${id}-list\" hx-swap=\"innerHTML\" hx-sync=\"this:replace\"\n  // Anything passed via hx-* in `rest` overrides these.\n  endpoint?: string\n  ariaLabel?: string\n  ariaLabelledby?: string\n  ariaDescribedby?: string\n  ariaInvalid?: boolean | \"grammar\" | \"spelling\"\n  class?: ClassValue\n  inputClass?: ClassValue\n  form?: string\n  // htmx attrs ride onto the <input>. With `endpoint` you usually need none;\n  // pass hx-* directly for full control (they override the endpoint defaults).\n  //   See repos/htmx/www/reference.md\n  [key: `hx-${string}`]: any\n  [key: `data-${string}`]: any\n}\n\nexport function Autocomplete(props: AutocompleteProps) {\n  const {\n    id,\n    name,\n    options = [],\n    placeholder,\n    value,\n    required,\n    disabled,\n    readonly,\n    autofocus,\n    minLength,\n    maxLength,\n    delay = 200,\n    endpoint,\n    ariaLabel,\n    ariaLabelledby,\n    ariaDescribedby,\n    ariaInvalid,\n    class: className,\n    inputClass,\n    form,\n    ...rest\n  } = props\n\n  const listId = `${id}-list`\n\n  // Server-streaming defaults, applied only when an endpoint is given.\n  // Anything in `rest` (explicit hx-*) wins.\n  const hxDefaults: Record<string, any> = endpoint\n    ? {\n        \"hx-get\": endpoint,\n        \"hx-trigger\": `input changed delay:${delay}ms`,\n        \"hx-target\": `#${listId}`,\n        \"hx-swap\": \"innerHTML\",\n        \"hx-sync\": \"this:replace\",\n      }\n    : {}\n  const hx = { ...hxDefaults, ...rest }\n\n  return (\n    <span data-slot=\"autocomplete\" class={cn(\"inline-block w-full\", className)}>\n      <input\n        type=\"text\"\n        id={id}\n        name={name}\n        list={listId}\n        value={value}\n        placeholder={placeholder}\n        required={required}\n        disabled={disabled}\n        readonly={readonly}\n        autofocus={autofocus}\n        minlength={minLength}\n        maxlength={maxLength}\n        form={form}\n        // autocomplete=\"off\" stops the browser layering its own history\n        // suggestions on top of the datalist.\n        autocomplete=\"off\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n        aria-invalid={ariaInvalid === undefined ? undefined : String(ariaInvalid)}\n        data-slot=\"autocomplete-input\"\n        class={autocompleteInputClasses({ class: inputClass })}\n        {...hx}\n      />\n      <datalist id={listId} data-slot=\"autocomplete-list\">\n        {options.map((o) => (\n          <option value={o.value} label={o.label} />\n        ))}\n      </datalist>\n    </span>\n  )\n}\n\n// Server-rendered single suggestion used by htmx endpoints. Lets the server\n// return a typed component instead of raw HTML strings.\nexport function AutocompleteOption(props: AutocompleteOption) {\n  return <option value={props.value} label={props.label} />\n}\n"
    },
    {
      "path": "registry/jinja2/autocomplete.html",
      "type": "registry:file",
      "target": "templates/components/autocomplete.html",
      "content": "{# Autocomplete macro — shadcn-htmx, htmx v4 + Tailwind v4.\n   Free-text input with native typeahead: <input list> + <datalist>. The\n   light native sibling of the APG combobox — the browser owns the dropdown\n   UI, substring filtering, click + keyboard selection, and focus. No JS.\n   Refs: repos/mdn/.../elements/datalist/index.md,\n         repos/mdn/.../elements/input/index.md#list\n\n   Usage (static suggestions):\n     {% from \"components/autocomplete.html\" import autocomplete %}\n     {{ autocomplete(id=\"fruit\", name=\"fruit\",\n                     options=[{\"value\": \"Apple\"}, {\"value\": \"Apricot\"}]) }}\n\n   Usage (server-streamed via htmx): pass an endpoint and an empty options\n   list; the macro wires the standard streaming defaults and the server\n   returns <option> tags swapped into the bound <datalist>.\n     {{ autocomplete(id=\"city\", name=\"city\", endpoint=\"/api/cities\") }}\n#}\n\n{% macro autocomplete(\n    id,\n    name=none,\n    options=[],\n    placeholder=none,\n    value=none,\n    required=false,\n    disabled=false,\n    readonly=false,\n    minlength=none,\n    maxlength=none,\n    delay=200,\n    endpoint=none,\n    aria_label=none,\n    aria_labelledby=none,\n    aria_describedby=none,\n    extra_class=\"\",\n    input_class=\"\",\n    **attrs\n) %}\n<span data-slot=\"autocomplete\" class=\"inline-block w-full {{ extra_class }}\">\n  <input\n    type=\"text\"\n    id=\"{{ id }}\"\n    {%- if name %} name=\"{{ name }}\"{% endif %}\n    list=\"{{ id }}-list\"\n    {%- if value is not none %} value=\"{{ value }}\"{% endif %}\n    {%- if placeholder %} placeholder=\"{{ placeholder }}\"{% endif %}\n    {%- if required %} required{% endif %}\n    {%- if disabled %} disabled{% endif %}\n    {%- if readonly %} readonly{% endif %}\n    {%- if minlength is not none %} minlength=\"{{ minlength }}\"{% endif %}\n    {%- if maxlength is not none %} maxlength=\"{{ maxlength }}\"{% endif %}\n    {%- if endpoint %} hx-get=\"{{ endpoint }}\" hx-trigger=\"input changed delay:{{ delay }}ms\" hx-target=\"#{{ id }}-list\" hx-swap=\"innerHTML\" hx-sync=\"this:replace\"{% endif %}\n    {%- if aria_label %} aria-label=\"{{ aria_label }}\"{% endif %}\n    {%- if aria_labelledby %} aria-labelledby=\"{{ aria_labelledby }}\"{% endif %}\n    {%- if aria_describedby %} aria-describedby=\"{{ aria_describedby }}\"{% endif %}\n    autocomplete=\"off\"\n    data-slot=\"autocomplete-input\"\n    class=\"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&.htmx-request]:opacity-70 {{ input_class }}\"\n    {%- for k, v in attrs.items() %} {{ k|replace('_', '-') }}=\"{{ v }}\"{% endfor -%}\n  >\n  <datalist id=\"{{ id }}-list\" data-slot=\"autocomplete-list\">\n    {% for opt in options %}<option value=\"{{ opt.value }}\"{% if opt.label %} label=\"{{ opt.label }}\"{% endif %}>{% endfor %}\n  </datalist>\n</span>\n{% endmacro %}\n\n{# A single <option> — useful when an htmx endpoint returns one suggestion. #}\n{% macro autocomplete_option(value, label=none) -%}\n<option value=\"{{ value }}\"{% if label %} label=\"{{ label }}\"{% endif %}>\n{%- endmacro %}\n"
    },
    {
      "path": "registry/go-templates/autocomplete.tmpl",
      "type": "registry:file",
      "target": "components/autocomplete.tmpl",
      "content": "{{/*\n  Autocomplete templates — shadcn-htmx, htmx v4 + Tailwind v4.\n  Free-text input with native typeahead: <input list> + <datalist>. The\n  browser owns the dropdown UI, filtering, click + keyboard selection and\n  focus. No JS. The light native sibling of the APG combobox.\n  Refs: repos/mdn/.../elements/datalist/index.md,\n        repos/mdn/.../elements/input/index.md#list\n\n      type AutocompleteArgs struct {\n          ID, Name, Placeholder, Value string\n          Options                      []AutocompleteOption\n          Required, Disabled, Readonly bool\n          MinLength, MaxLength         string\n          AriaLabel, AriaLabelledby, AriaDescribedby string\n          // Server-streamed suggestions: set Endpoint (and optionally Delay,\n          // default \"200\") to wire the htmx defaults; leave Options empty and\n          // the bound <datalist> is filled by the htmx response.\n          Endpoint, Delay string\n      }\n      type AutocompleteOption struct{ Value, Label string }\n*/}}\n\n{{define \"autocomplete\"}}\n{{- $delay := or .Delay \"200\" -}}\n<span data-slot=\"autocomplete\" class=\"inline-block w-full\">\n  <input type=\"text\" id=\"{{.ID}}\" {{if .Name}}name=\"{{.Name}}\"{{end}} list=\"{{.ID}}-list\"\n         {{if .Value}}value=\"{{.Value}}\"{{end}}\n         {{if .Placeholder}}placeholder=\"{{.Placeholder}}\"{{end}}\n         {{if .Required}}required{{end}} {{if .Disabled}}disabled{{end}} {{if .Readonly}}readonly{{end}}\n         {{if .MinLength}}minlength=\"{{.MinLength}}\"{{end}}\n         {{if .MaxLength}}maxlength=\"{{.MaxLength}}\"{{end}}\n         {{if .Endpoint}}hx-get=\"{{.Endpoint}}\" hx-trigger=\"input changed delay:{{$delay}}ms\" hx-target=\"#{{.ID}}-list\" hx-swap=\"innerHTML\" hx-sync=\"this:replace\"{{end}}\n         {{if .AriaLabel}}aria-label=\"{{.AriaLabel}}\"{{end}}\n         {{if .AriaLabelledby}}aria-labelledby=\"{{.AriaLabelledby}}\"{{end}}\n         {{if .AriaDescribedby}}aria-describedby=\"{{.AriaDescribedby}}\"{{end}}\n         autocomplete=\"off\"\n         data-slot=\"autocomplete-input\"\n         class=\"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&.htmx-request]:opacity-70\">\n  <datalist id=\"{{.ID}}-list\" data-slot=\"autocomplete-list\">\n    {{range .Options}}<option value=\"{{.Value}}\"{{if .Label}} label=\"{{.Label}}\"{{end}}>{{end}}\n  </datalist>\n</span>\n{{end}}\n\n{{define \"autocomplete_option\"}}\n<option value=\"{{.Value}}\"{{if .Label}} label=\"{{.Label}}\"{{end}}>\n{{end}}\n"
    },
    {
      "path": "registry/phoenix/autocomplete.ex",
      "type": "registry:file",
      "target": "lib/my_app_web/components/autocomplete.ex",
      "content": "defmodule ShadcnHtmx.Components.Autocomplete do\n  @moduledoc \"\"\"\n  Autocomplete — shadcn-htmx, htmx v4 + Tailwind v4 for Phoenix.\n\n  Free-text input with native typeahead suggestions: `<input list>` bound to\n  a `<datalist>`. The light, native sibling of the APG combobox — the browser\n  owns the dropdown UI, substring filtering, click + keyboard selection, and\n  focus management. No custom JS. The value is always free text: an\n  autocomplete *suggests*, it does not constrain.\n\n  Refs: repos/mdn/.../elements/datalist/index.md,\n        repos/mdn/.../elements/input/index.md#list\n\n  ## Examples\n\n      # Static suggestions\n      <.autocomplete id=\"fruit\" name=\"fruit\" placeholder=\"Search fruit…\"\n        options={[%{value: \"Apple\"}, %{value: \"Apricot\"}, %{value: \"Banana\"}]} />\n\n      # Server-streamed via htmx — set `endpoint`; the component wires\n      # hx-get / hx-trigger / hx-target / hx-swap / hx-sync and the server\n      # returns <option> tags swapped into the bound <datalist>.\n      <.autocomplete id=\"city\" name=\"city\" placeholder=\"Search cities…\"\n        endpoint={~p\"/api/cities\"} />\n      # Endpoint returns: <.autocomplete_option value=\"Berlin\" />\n  \"\"\"\n\n  use Phoenix.Component\n\n  attr :id, :string, required: true\n  attr :name, :string, default: nil\n  attr :placeholder, :string, default: nil\n  attr :value, :string, default: nil\n  attr :options, :list, default: []\n  attr :required, :boolean, default: false\n  attr :disabled, :boolean, default: false\n  attr :readonly, :boolean, default: false\n  attr :minlength, :integer, default: nil\n  attr :maxlength, :integer, default: nil\n  attr :delay, :integer, default: 200\n  attr :endpoint, :string, default: nil\n  attr :\"aria-label\", :string, default: nil\n  attr :\"aria-labelledby\", :string, default: nil\n  attr :\"aria-describedby\", :string, default: nil\n  attr :class, :string, default: nil\n\n  attr :rest, :global,\n    include: ~w(hx-get hx-post hx-trigger hx-target hx-swap hx-sync hx-vals hx-headers form)\n\n  def autocomplete(assigns) do\n    assigns =\n      assign(assigns, :hx, if(assigns.endpoint, do: stream_attrs(assigns.id, assigns.delay, assigns.endpoint), else: %{}))\n\n    ~H\"\"\"\n    <span data-slot=\"autocomplete\" class={[\"inline-block w-full\", @class]}>\n      <input\n        type=\"text\"\n        id={@id}\n        name={@name}\n        list={\"#{@id}-list\"}\n        value={@value}\n        placeholder={@placeholder}\n        required={@required}\n        disabled={@disabled}\n        readonly={@readonly}\n        minlength={@minlength}\n        maxlength={@maxlength}\n        autocomplete=\"off\"\n        aria-label={assigns[:\"aria-label\"]}\n        aria-labelledby={assigns[:\"aria-labelledby\"]}\n        aria-describedby={assigns[:\"aria-describedby\"]}\n        data-slot=\"autocomplete-input\"\n        class=\"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&.htmx-request]:opacity-70\"\n        {@hx}\n        {@rest}\n      />\n      <datalist id={\"#{@id}-list\"} data-slot=\"autocomplete-list\">\n        <option :for={opt <- @options} value={opt[:value]} label={opt[:label]} />\n      </datalist>\n    </span>\n    \"\"\"\n  end\n\n  # Standard server-streaming htmx defaults; explicit hx-* in @rest override\n  # these because @rest is spread after @hx in the markup.\n  defp stream_attrs(id, delay, endpoint) do\n    %{\n      \"hx-get\" => endpoint,\n      \"hx-trigger\" => \"input changed delay:#{delay}ms\",\n      \"hx-target\" => \"##{id}-list\",\n      \"hx-swap\" => \"innerHTML\",\n      \"hx-sync\" => \"this:replace\"\n    }\n  end\n\n  attr :value, :string, required: true\n  attr :label, :string, default: nil\n\n  def autocomplete_option(assigns) do\n    ~H\"\"\"\n    <option value={@value} label={@label} />\n    \"\"\"\n  end\nend\n"
    },
    {
      "path": "registry/html/autocomplete.html",
      "type": "registry:file",
      "target": "snippets/autocomplete.html",
      "content": "<!--\n  shadcn-htmx — raw HTML autocomplete snippet.\n\n  Free-text input with native typeahead: <input list> + <datalist>. The\n  light native sibling of the APG combobox — the browser handles the dropdown\n  UI, substring filtering, click + keyboard selection, and focus. Zero JS.\n  The value is always free text; an autocomplete suggests, it does not\n  constrain (use <select> when the value must be one of a fixed set).\n  Refs: repos/mdn/.../elements/datalist/index.md,\n        repos/mdn/.../elements/input/index.md#list\n\n  Two patterns:\n    1. Static suggestions — fill the <datalist> at render time.\n    2. Server-streamed — leave the <datalist> empty and let htmx fetch a\n       fresh <option> set on input. The server returns <option> tags swapped\n       into the bound list (hx-target points at the datalist).\n-->\n\n<!-- 1. Static suggestions -->\n<span data-slot=\"autocomplete\" class=\"inline-block w-full\">\n  <input type=\"text\" id=\"fruit\" name=\"fruit\" list=\"fruit-list\"\n         placeholder=\"Search fruit…\" autocomplete=\"off\"\n         data-slot=\"autocomplete-input\"\n         class=\"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&.htmx-request]:opacity-70\">\n  <datalist id=\"fruit-list\" data-slot=\"autocomplete-list\">\n    <option value=\"Apple\">\n    <option value=\"Apricot\">\n    <option value=\"Banana\">\n    <option value=\"Blackberry\">\n    <option value=\"Blueberry\">\n  </datalist>\n</span>\n\n<!-- 2. Server-streamed via htmx -->\n<span data-slot=\"autocomplete\" class=\"inline-block w-full\">\n  <input type=\"text\" id=\"city\" name=\"city\" list=\"city-list\"\n         placeholder=\"Search cities…\" autocomplete=\"off\"\n         hx-get=\"/api/cities\"\n         hx-trigger=\"input changed delay:200ms\"\n         hx-target=\"#city-list\"\n         hx-swap=\"innerHTML\"\n         hx-sync=\"this:replace\"\n         data-slot=\"autocomplete-input\"\n         class=\"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&.htmx-request]:opacity-70\">\n  <datalist id=\"city-list\" data-slot=\"autocomplete-list\">\n    <!-- Server returns: -->\n    <!-- <option value=\"Berlin\"> -->\n    <!-- <option value=\"Bern\"> -->\n  </datalist>\n</span>\n"
    }
  ]
}