{# Swapped in by Unpoly as the combobox listbox contents. Each option needs
   a stable id so core.js can point aria-activedescendant at it. #}
<div id="search-results-{{ field_name }}" class="fcu-dropdown-menu" role="listbox" style="display: block; position: static; max-height: 240px; overflow-y: auto; border: none; box-shadow: none; padding: 0;">
  {% for result in results %}
    <a href="#"
       class="fcu-dropdown-item"
       role="option"
       id="search-opt-{{ field_name }}-{{ loop.index0 }}"
       aria-selected="false"
       style="display: block; padding: 8px 12px; text-decoration: none; color: inherit; font-size: var(--fcu-font-size-sm);"
       onclick="selectItem('{{ field_name }}', '{{ result[field_type.related_class._primary_key] }}', '{{ result }}'); return false;">
      {{ result }}
    </a>
  {% endfor %}
  {% if not results %}
    <div role="option" aria-disabled="true" style="padding: 8px 12px; font-size: var(--fcu-font-size-sm); color: var(--fcu-text-muted); font-style: italic;">{{ construct.t("crud-no-items-found") }}</div>
  {% endif %}
</div>