From c2ae162e0ab18fa3f4de500c477f8e2d42720374 Mon Sep 17 00:00:00 2001
From: "fabien.leconte" <fabien.leconte@kosmos.fr>
Date: Fri, 30 Sep 2016 14:05:05 +0200
Subject: [PATCH] Added a sample for custom templates

---
 index.html | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/index.html b/index.html
index ddb4c19..8dabdc7 100644
--- a/index.html
+++ b/index.html
@@ -237,6 +237,28 @@
         <option value="Queens">Queens</option>
         <option value="Staten Island">Staten Island</option>
       </select>
+
+      <label for="choices-custom-templates">Custom templates on items</label>
+      <select class="form-control" name="choices-custom-templates" id="choices-custom-templates" placeholder="This is a placeholder">
+        <option value="Madrid">Madrid</option>
+        <option value="Toronto">Toronto</option>
+        <option value="Vancouver">Vancouver</option>
+        <option value="London">London</option>
+        <option value="Manchester">Manchester</option>
+        <option value="Liverpool">Liverpool</option>
+        <option value="Paris">Paris</option>
+        <option value="Malaga">Malaga</option>
+        <option value="Washington" disabled>Washington</option>
+        <option value="Lyon">Lyon</option>
+        <option value="Marseille">Marseille</option>
+        <option value="Hamburg">Hamburg</option>
+        <option value="Munich">Munich</option>
+        <option value="Barcelona">Barcelona</option>
+        <option value="Berlin">Berlin</option>
+        <option value="Montreal">Montreal</option>
+        <option value="New York">New York</option>
+        <option value="Michigan">Michigan</option>
+      </select>
     </div>
   </div>
   <script>
@@ -398,6 +420,21 @@
         }
       });
 
+      var customTemplates = new Choices(document.getElementById('choices-custom-templates'), {
+        callbackOnCreateTemplates: function (instance, strToEl) {
+          var classNames = instance.config.classNames;
+          return {
+            choice: (data) => {
+              return strToEl(`
+                <div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${instance.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
+                    <span>&bigstar;</span> ${data.label}
+                  </div>
+                `);
+            },
+          };
+        }
+      });
+
       var boroughs = new Choices(document.getElementById('boroughs')).disable();
     });
   </script>