UNPKG

formio-sfds

Version:

The Form.io theme for sf.gov

github.com/SFDigitalServices/formio-sfds

SFDigitalServices/formio-sfds

29 lines (26 loc) • 3.7 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!doctype html> <html lang="en"> <head> <title>Autocomplete | formio-sfds examples</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="/sfgov/forms.css"> </head> <body> <div class="formio-sfds"> <div class="container p-2"> <h1 class="h3 mb-4"> <a href="/">formio-sfds@10.0.0</a> / Autocomplete </h1> <sfgov-form data-form="{&quot;components&quot;:[{&quot;type&quot;:&quot;select&quot;,&quot;key&quot;:&quot;job&quot;,&quot;label&quot;:&quot;Your job&quot;,&quot;tags&quot;:[&quot;autocomplete&quot;],&quot;data&quot;:{&quot;values&quot;:[{&quot;label&quot;:&quot;Healthcare worker&quot;,&quot;value&quot;:&quot;healthCareWorker&quot;},{&quot;label&quot;:&quot;Emergency services&quot;,&quot;value&quot;:&quot;emergencyServices&quot;},{&quot;label&quot;:&quot;Food and agriculture&quot;,&quot;value&quot;:&quot;foodAndAgriculture&quot;},{&quot;label&quot;:&quot;Energy&quot;,&quot;value&quot;:&quot;energy&quot;},{&quot;label&quot;:&quot;Water and wastewater&quot;,&quot;value&quot;:&quot;waterAndWastewater&quot;}]}},{&quot;type&quot;:&quot;select&quot;,&quot;key&quot;:&quot;words&quot;,&quot;label&quot;:&quot;Pick some words&quot;,&quot;tags&quot;:[&quot;autocomplete&quot;],&quot;multiple&quot;:true,&quot;customOptions&quot;:{&quot;maxItemCount&quot;:3},&quot;properties&quot;:{&quot;en:autocomplete.maxItemText&quot;:&quot;Sorry, {{count}} tags max!&quot;},&quot;description&quot;:&quot;This uses &lt;code&gt;multiple&lt;/code&gt; and&#92;n&lt;code&gt;customOptions.maxItemCount&lt;/code&gt; to limit the number of&#92;nchoices, and the &lt;code&gt;autocomplete.maxItemText&lt;/code&gt; translation&#92;nkey to change the text that shows up when two are selected.&#92;n&quot;,&quot;data&quot;:{&quot;values&quot;:[{&quot;label&quot;:&quot;green&quot;,&quot;value&quot;:&quot;green&quot;},{&quot;label&quot;:&quot;empathic&quot;,&quot;value&quot;:&quot;empathic&quot;},{&quot;label&quot;:&quot;never&quot;,&quot;value&quot;:&quot;never&quot;},{&quot;label&quot;:&quot;eleven&quot;,&quot;value&quot;:&quot;eleven&quot;},{&quot;label&quot;:&quot;dry&quot;,&quot;value&quot;:&quot;dry&quot;},{&quot;label&quot;:&quot;valuable&quot;,&quot;value&quot;:&quot;valuable&quot;},{&quot;label&quot;:&quot;fortify&quot;,&quot;value&quot;:&quot;fortify&quot;},{&quot;label&quot;:&quot;whatever&quot;,&quot;value&quot;:&quot;whatever&quot;},{&quot;label&quot;:&quot;leaven&quot;,&quot;value&quot;:&quot;leaven&quot;}]}},{&quot;type&quot;:&quot;htmlelement&quot;,&quot;tag&quot;:&quot;div&quot;,&quot;content&quot;:&quot;&lt;b&gt;ProTip:&lt;/b&gt; Add &lt;a&#92;nhref=&#92;&quot;?language=debug&#92;&quot;&gt;&lt;code&gt;?language=debug&lt;/code&gt;&lt;/a&gt; to the&#92;nquery string to see the &lt;code&gt;autocomplete.*&lt;/code&gt; translation keys&#92;nin context.&#92;n&quot;}]}" data-options="{&quot;i18n&quot;:{&quot;debug&quot;:{&quot;autocomplete.noResultsText&quot;:&quot;autocomplete.noResultsText&quot;,&quot;autocomplete.itemSelectText&quot;:&quot;autocomplete.itemSelectText&quot;,&quot;autocomplete.maxItemText&quot;:&quot;autocomplete.maxItemText&quot;,&quot;autocomplete.noChoicesText&quot;:&quot;autocomplete.noChoicesText&quot;,&quot;autocomplete.searchPlaceholderValue&quot;:&quot;autocomplete.searchPlaceholderValue&quot;}}}"> </sfgov-form> </div> </div> <script src="https://unpkg.com/formiojs@4.14.8/dist/formio.full.min.js"></script> <script src="/dist/formio-sfds.standalone.js"></script> <script src="/dist/examples.js"></script> </body> </html>