|
1 | | -<!doctype html> |
| 1 | +<!DOCTYPE html> |
2 | 2 | <html> |
3 | 3 | <head> |
4 | 4 | <title>Auto-complete examples</title> |
5 | | - <meta charset="utf-8"> |
| 5 | + <meta charset="utf-8" /> |
6 | 6 | <style> |
7 | | - auto-complete [aria-selected="true"], |
8 | | - auto-complete [role="option"]:hover { |
| 7 | + auto-complete [aria-selected='true'], |
| 8 | + auto-complete [role='option']:hover { |
9 | 9 | background-color: lavender; |
10 | 10 | } |
11 | | - auto-complete [aria-disabled="true"] { |
| 11 | + auto-complete [aria-disabled='true'] { |
12 | 12 | color: grey; |
13 | 13 | } |
14 | 14 | </style> |
|
43 | 43 | <label id="robots-label" for="robot">Robots</label> |
44 | 44 | <!-- To enable auto-select (select first on Enter), use data-autoselect="true" --> |
45 | 45 | <auto-complete src="/demo" for="items-popup" aria-labelledby="robots-label" data-autoselect="true"> |
46 | | - <input name="robot" type="text" aria-labelledby="robots-label" autofocus> |
| 46 | + <input name="robot" type="text" aria-labelledby="robots-label" autofocus /> |
47 | 47 | <!-- if a clear button is passed in, recommended to be *before* UL elements to avoid conflicting with their blur logic --> |
48 | 48 | <button id="robot-clear">x</button> |
49 | 49 | <ul id="items-popup"></ul> |
|
61 | 61 | <label id="robots-a-label" for="robot-a">Robots (using Input ID)</label> |
62 | 62 | <!-- To enable auto-select (select first on Enter), use data-autoselect="true" --> |
63 | 63 | <auto-complete src="/demo" for="items-a-popup" aria-labelledby="robots-a-label" data-autoselect="true"> |
64 | | - <input id="robot-a" name="robot-a" type="text" aria-labelledby="robots-a-label" autofocus> |
| 64 | + <input id="robot-a" name="robot-a" type="text" aria-labelledby="robots-a-label" autofocus /> |
65 | 65 | <!-- if a clear button is passed in, recommended to be *before* UL elements to avoid conflicting with their blur logic --> |
66 | 66 | <button id="robot-a-clear">x</button> |
67 | 67 | <ul id="items-a-popup"></ul> |
|
77 | 77 | <!-- example without autoselect --> |
78 | 78 | <form> |
79 | 79 | <label id="robots-2-label" for="robot-2">Robots (without autoselect on enter)</label> |
80 | | - <auto-complete src="/demo" for="items-2-popup" aria-labelledby="robots-2-label" > |
81 | | - <input name="robot-2" type="text" aria-labelledby="robots-2-label" autofocus> |
| 80 | + <auto-complete src="/demo" for="items-2-popup" aria-labelledby="robots-2-label"> |
| 81 | + <input name="robot-2" type="text" aria-labelledby="robots-2-label" autofocus /> |
82 | 82 | <ul id="items-2-popup"></ul> |
83 | 83 | <div id="items-2-popup-feedback" class="sr-only"></div> |
84 | 84 | </auto-complete> |
|
0 commit comments