From ce38479f8fbf52babec2e40036c63a0197e4cb28 Mon Sep 17 00:00:00 2001
From: Srinivasa Varma <srinivasavarma.d@gmail.com>
Date: Sun, 25 Oct 2020 10:44:16 +0530
Subject: [PATCH 1/3] StimulusJs integration example

---
 README.md | 62 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)

diff --git a/README.md b/README.md
index cb4f5ce0..7387b014 100644
--- a/README.md
+++ b/README.md
@@ -48,6 +48,7 @@
 * [Single-Value Only](#single-value)
 * [React wrapper](#react)
 * [Angular wrapper](#angular)
+* [StimulusJs Example](#stimulusjs)
 * [Vue Example](https://codesandbox.io/s/tagify-tags-component-vue-example-l8ok4)
 * [jQuery version](#jquery-version)
 * [FAQ](#FAQ)
@@ -515,6 +516,67 @@ export class AppComponent implements OnDestroy {
 </details>
 
 
+## StimulusJs
+
+Loading remote server data using StimulusJs. Below is a basic example using the `fetch` API 
+
+<details>
+  <summary>Example:</summary>
+
+```typescript
+  import { Controller } from 'stimulus';
+  import Tagify from '@yaireo/tagify';
+
+  export default class extends Controller {
+    
+    connect() {
+      this.countries();
+    }
+
+    countries() {
+      var that = this;
+      const url = 'https://get_suggestions.com/countries.json';
+
+      const countryInput = document.querySelector('input');
+      const tagify = new Tagify(countryInput, {
+        whitelist: [],
+        maxTags: 10,
+        dropdown: {
+          maxItems: 20, // <- mixumum allowed rendered suggestions
+          classname: 'tags-look', // <- custom classname for this dropdown, so it could be targeted
+          enabled: 0, // <- show suggestions on focus
+          closeOnSelect: false, // <- do not hide the suggestions dropdown once an item has been selected
+        },
+      });
+
+      tagify.on('focus', function(e) {
+        that.loadWhiteList(e, tagify, url)
+      })
+    }
+
+    loadWhiteList(e, tagify, url) {
+      let controller;
+      const value = e.detail.value;
+      tagify.settings.whitelist.length = 0; // reset the whitelist
+
+      controller && controller.abort();
+      controller = new AbortController();
+
+      tagify.loading(true).dropdown.hide.call(tagify)
+
+      fetch(`${url}?value=${value}`, {signal:controller.signal})
+        .then(RES => RES.json())
+        .then(function(whitelist){
+          tagify.settings.whitelist.splice(0, whitelist.length, ...whitelist)
+          tagify.loading(false).dropdown.show.call(tagify, value);
+        })
+    }
+
+  }
+
+```
+</details>
+
 
 ## jQuery version
 

From 4ac3326bf288243c3ba036b8176671eccec97a11 Mon Sep 17 00:00:00 2001
From: Srinivasa Varma <srinivasavarma.d@gmail.com>
Date: Thu, 29 Oct 2020 07:35:01 +0530
Subject: [PATCH 2/3] codesandbox.io example is added

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 7387b014..40165025 100644
--- a/README.md
+++ b/README.md
@@ -520,6 +520,8 @@ export class AppComponent implements OnDestroy {
 
 Loading remote server data using StimulusJs. Below is a basic example using the `fetch` API 
 
+See live [Demo](https://codesandbox.io/s/quizzical-mirzakhani-ss8k2)
+
 <details>
   <summary>Example:</summary>
 

From 33e493fe654c0e6190afa3b2c32d4cbb3d18d5af Mon Sep 17 00:00:00 2001
From: Srinivasa Varma <srinivasavarma.d@gmail.com>
Date: Thu, 29 Oct 2020 08:01:53 +0530
Subject: [PATCH 3/3] codesandbox.io example is added

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 40165025..aee70e0b 100644
--- a/README.md
+++ b/README.md
@@ -522,6 +522,7 @@ Loading remote server data using StimulusJs. Below is a basic example using the
 
 See live [Demo](https://codesandbox.io/s/quizzical-mirzakhani-ss8k2)
 
+
 <details>
   <summary>Example:</summary>