moodle/lib/templates/form_autocomplete_suggestions.mustache
Mikel Martín e9afd7f072
MDL-79629 forms: Improvements to autocomplete form element
- Preserve autocomplete input options classes to the autocomplete suggestions
- Add new styles for suggestions headings
- Add a new class selector form-autocomplete-input so input can be easily selected
  for styling.

Various improvements to make the module more re-usable elsewhere:
change event bubbling, promise argument support when enhancing.

Co-authored-by: Paul Holden <paulh@moodle.com>
2023-11-02 14:50:10 +00:00

51 lines
1.8 KiB
Plaintext

{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template core/form_autocomplete_suggestions
Moodle template for the list of valid options in an autocomplate form element.
Classes required for JS:
* none
Data attributes required for JS:
* none
Context variables required for this template:
* suggestionsId The dom id of the current suggestions list.
* options List of options with label and value fields.
Example context (json):
{ "suggestionsId": 1, "options": [
{ "label": "Item label with <strong>tags</strong>", "value": "5" },
{ "label": "Another item label with <strong>tags</strong>", "value": "4"},
{ "label": "A disabled item", "value": "", "disabled": true}
]}
}}
<ul class="form-autocomplete-suggestions" id="{{suggestionsId}}" role="listbox" aria-label="{{#str}}suggestions, form{{/str}}" aria-hidden="true" tabindex="-1">
{{#options}}
<li
role="option"
data-value="{{value}}"
{{#disabled}}aria-disabled="true"{{/disabled}}
{{#classes}}class="{{{classes}}}"{{/classes}}
>
{{{label}}}
</li>
{{/options}}
</ul>