Merge branch 'master' into fix-issue-knadh#2

docs/index.html

@@ -77,6 +77,7 @@ <h1>floatype.js</h1>
 		<br />Zero dependencies (~1200 bytes minified + gzipped). Type below to try.
 	</p>
 	<textarea autofocus></textarea>
+	<p><button>Toggle bind/unbind</button></p>
 
 	<p>For dropdown suggestions on inputs, see <a href="https://github.com/knadh/autocomp.js">autocomp.js</a></p>
 
@@ -92,19 +93,34 @@ <h1>floatype.js</h1>
 
 	// Example 1.
 	// Simple string results.
-	floatype(document.querySelector("textarea"), {
-		onQuery: async (val) => {
-			// This callback returns an array of search results.
-			// Typically, this will be a server side fetch() request.
-			// Example:
-			// 		const resp = await fetch(`/search?q=${query}`);
-			// 		const res = await response.json();  
-			//		return res;
+	function bind() {
+		return floatype(document.querySelector("textarea"), {
+			onQuery: async (val) => {
+				// This callback returns an array of search results.
+				// Typically, this will be a server side fetch() request.
+				// Example:
+				// 		const resp = await fetch(`/search?q=${query}`);
+				// 		const res = await response.json();  
+				//		return res;
 
-			const q = val.trim().toLowerCase();
-			return WORDS.filter(s => s.startsWith(q)).slice(0, 10);
+				const q = val.trim().toLowerCase();
+				return WORDS.filter(s => s.startsWith(q)).slice(0, 10);
+			}
+		});
+	}
+
+	window._fl = bind();
+
+	document.querySelector("button").onclick = (e) => {
+		if (window._fl) {
+			window._fl.unbind();
+			window._fl = null;
+		} else {
+			window._fl = bind();
 		}
-	});
+
+		document.querySelector("textarea").focus();
+	}
 </script>
 </body>
 </html>

floatype.js

@@ -188,6 +188,14 @@ export function floatype(el, options = {}) {
 		el.value = el.value.substring(0, start) + val + (el.value[el.selectionStart] !== " " ? " " : "") + el.value.substring(el.selectionStart);
 		el.setSelectionRange(start + val.length + 1, start + val.length + 1);
 	}
+
+	return {
+		unbind: function() {
+			["input", "keydown", "blur"].forEach(k => el.removeEventListener(k, handleEvent));
+			destroy();
+			shadow.remove();
+		}
+	}
 }
 
 export default floatype;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knadh/floatype",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "description": "A tiny, zero-dependency, floating autocomplete / autosuggestion widget for textarea.",
   "main": "floatype.js",
   "files": [