Refactor / redo input->autocomp to textarea->floatype.

knadh · Nov 25, 2023 · 46c5f78 · 46c5f78
1 parent 10a29e9
commit 46c5f78
Show file tree

Hide file tree

Showing 6 changed files with 231 additions and 238 deletions.
diff --git a/README.md b/README.md
@@ -1,38 +1,33 @@
-# autocomp.js
+# floatype.js
 
-A super tiny Javascript autocomplete / autosuggestion library. Zero dependencies and ~800 bytes minified + gzipped.
+A super tiny Javascript autocomplete / autosuggestion library. Zero dependencies and ~1200 bytes minified + gzipped.
 
-[**View demo**](https://knadh.github.io/autocomp.js)
+[**View demo**](https://knadh.github.io/floatype.js)
 
-[![demo](https://github.com/knadh/autocomp.js/assets/547147/8bfaa03c-46a0-4e4e-a127-914120265009)](https://knadh.github.io/autocomp.js)
+![demo](https://github.com/knadh/floatype.js/assets/547147/d4525e83-da4d-46a1-8ebe-203d49ed0115)
 
 
 ## Usage
 
 ### Node
 ```shell
-npm install @knadh/autocomp
+npm install @knadh/floatype
 ```
 
 ```javascript
-import { autocomp } from @knadh/autocomp;
+import { floatype } from @knadh/floatype;
 
-autocomp(document.querySelector("#q"), {
+floatype(document.querySelector("textarea"), {
 	onQuery: async (val) => {
 		// fetch() or whatever that fetches/generates results.
 		return ["results", "here"];
-	},
-
-	onSelect: (val) => {
-		alert(val);
-		return val;
 	}
 });
 ```
 
-Check the [demo source](https://github.com/knadh/autocomp.js/blob/master/docs/index.html) to see advanced usage and basic CSS styles.
+Check the [demo source](https://github.com/knadh/floatype.js/blob/master/docs/index.html) to see advanced usage and basic CSS styles.
 
 ### ES6 module
-Check the [demo source](https://github.com/knadh/autocomp.js/blob/master/docs/index.html) to use the lib in `<script>` directly on an HTML page.
+Check the [demo source](https://github.com/knadh/floatype.js/blob/master/docs/index.html) to use the lib in `<script>` directly on an HTML page.
 
 Licensed under the MIT License.
diff --git a/autocomp.js b/autocomp.js
diff --git a/docs/autocomp.min.js b/docs/autocomp.min.js
diff --git a/docs/floatype.min.js b/docs/floatype.min.js
diff --git a/docs/index.html b/docs/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<title>autocomp.js - Super tiny Javascript autocomplete demo</title>
+	<title>floatype.js - Super tiny Javascript floating suggest-as-you-type autocomplete widget</title>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<meta name="description" content="Super tiny Javascript autocomplete, autosuggestion, search-as-you-type library" />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -12,43 +12,48 @@
 		html, body {
 			font-family: "Inter", "Helvetica Neue", "Museo Sans", sans-serif;
 			font-size: 22px;
-			line-height: 32px;
-			text-align: center;
+			line-height: 36px;
 			color: #333;
 		}
-		input {
+		textarea {
 			font-family: "Inter", "Helvetica Neue", "Museo Sans", sans-serif;
-
 			padding: 15px;
-			margin: 0 10px;
 			font-size: 1.2rem;
+			line-height: 1.5rem;
 			border: 1px solid #ccc;
 			box-shadow: 2px 2px 2px #eee;
 			outline: none;
-			max-width: 100%;
+			width: 95%;
+			height: 500px;
 		}
 		a {
 			color: #999;
 		}
+		h1, h2, h3 {
+			color: #00f;
+		}
 
 		.container {
-			margin-top: 30vh;
+			margin: 20vh auto 0 auto;
+			max-width: 1000px;
 		}
-		.autocomp {
+		.floatype {
+			position: absolute;
 			background: #f8f8f8;
-			border-radius: 0 0 5px 5px;
 			border: 1px solid #ccc;
-			border-top: 0;
 			box-shadow: 2px 2px 2px #eee;
 			text-align: left;
+			max-width: 200px;
 		}
-		.autocomp-item {
+		.floatype-item {
 			padding-bottom: 5px;
-			padding: 10px;
+			padding: 3px 10px;
 			cursor: pointer;
 		}
-		.autocomp-item:hover,
-		.autocomp-sel {
+		.floatype-item:hover {
+			background: #f1f1f1;
+		}
+		.floatype-sel {
 			background: #f1f1f1;
 			font-weight: bold;
 		}
@@ -61,38 +66,33 @@
 			.container {
 				margin-top: 5vh;
 			}
-			input {
-				margin-bottom: 20px;
-			}
 		}
 	</style>
 </head>
 <body>
 
 <div class="container">
-	<h2 id="title">autocomp.js</h2>
-	<p>A super tiny Javascript autocomplete library.
-		<br />Zero dependencies and ~800 bytes (min+gzip).
-		<br />Type below to test.
+	<h1>floatype.js</h1>
+	<p>A super tiny Javascript floating suggest-as-you-type autocomplete widget for textareas.
+		<br />Zero dependencies (~1200 bytes minified + gzipped). Type below to try.
 	</p>
-	<input id="simple" autofocus placeholder="simple string results" />
-	<input id="object" placeholder="objects with HTML results" />
+	<textarea autofocus></textarea>
+
+	<p>For dropdown suggestions on inputs, see <a href="https://github.com/knadh/autocomp.js">autocomp.js</a></p>
 
-	<p><small><a href="https://github.com/knadh/autocomp.js">knadh/autocomp.js</a></small></p>
+	<p><small><a href="https://github.com/knadh/floatype.js">knadh/floatype.js</a></small></p>
 </div>
 
 <script type="module">
-	import { autocomp } from './autocomp.min.js';
+	import { floatype } from './floatype.min.js';
 
-	document.querySelectorAll("input").forEach((el) => { el.value = ""; });
-	const WORDS = ["apple", "banana", "apricot", "atemoya", "avocados", "blueberry", "blackcurrant", "ackee", "cranberry", "cantaloupe", "cherry", "black sapote", "dragonfruit", "dates", "cherimoya", "finger lime", "fig", "coconut", "grapefruit", "gooseberries", "custard apple", "chempedak", "hazelnut", "honeyberries", "dragon fruit", "durian", "horned melon", "hog plum", "egg fruit", "indian fig", "ice apple", "guava", "fuyu persimmon", "jackfruit", "jujube", "honeydew melon", "jenipapo", "kiwi", "kabosu", "lime", "lychee", "longan", "langsat", "mango", "mulberry", "pear", "muskmelon", "passion fruit", "mangosteen", "nectarine", "olive", "oranges", "mouse melon", "papaya", "peach", "rose apple", "noni fruit", "pomegranate", "pineapple", "rambutan", "raspberries", "strawberries", "soursop", "tangerine", "watermelon", "sapota", "star apple"];
-	const COLORS = ['#DAA520', '#228B22', '#8B4513', '#D2691E', '#BDB76B', '#FFD700', '#808000', '#FF4500', '#B8860B', '#CD853F'];
-	const EMOJIS = ['😀', '😍', '🐱', '🌺', '🚀', '🍕', '🌟', '🎉', '🎨', '🎵'];
+	document.querySelector("textarea").value = "";
 
+	const WORDS = ["apple", "banana", "apricot", "atemoya", "avocados", "blueberry", "blackcurrant", "ackee", "cranberry", "cantaloupe", "cherry", "black sapote", "dragonfruit", "dates", "cherimoya", "finger lime", "fig", "coconut", "grapefruit", "gooseberries", "custard apple", "chempedak", "hazelnut", "honeyberries", "dragon fruit", "durian", "horned melon", "hog plum", "egg fruit", "indian fig", "ice apple", "guava", "fuyu persimmon", "jackfruit", "jujube", "honeydew melon", "jenipapo", "kiwi", "kabosu", "lime", "lychee", "longan", "langsat", "mango", "mulberry", "pear", "muskmelon", "passion fruit", "mangosteen", "nectarine", "olive", "oranges", "mouse melon", "papaya", "peach", "rose apple", "noni fruit", "pomegranate", "pineapple", "rambutan", "raspberries", "strawberries", "soursop", "tangerine", "watermelon", "sapota", "star apple"];
 
 	// Example 1.
 	// Simple string results.
-	autocomp(document.querySelector("#simple"), {
+	floatype(document.querySelector("textarea"), {
 		onQuery: async (val) => {
 			// This callback returns an array of search results.
 			// Typically, this will be a server side fetch() request.
@@ -103,53 +103,6 @@ <h2 id="title">autocomp.js</h2>
 
 			const q = val.trim().toLowerCase();
 			return WORDS.filter(s => s.startsWith(q)).slice(0, 10);
-		},
-
-		onSelect: (val) => {
-			document.querySelector("#title").innerText = val;
-
-			// Whatever is returned here is set in the input box.
-			return val;
-		}
-	});
-
-
-	// Example 2.
-	// Object results and HTML rendering.
-	autocomp(document.querySelector("#object"), {
-		onQuery: async (val) => {
-			const q = val.trim().toLowerCase();
-			const out = WORDS.filter(s => s.startsWith(q)).slice(0, 10);
-
-			// Results are objects:
-			// [{fruit: "apple", color: "..", emoji: ".."} ...]
-			return out.map(w => ({
-				fruit: w,
-				color: COLORS[Math.floor(Math.random() * COLORS.length)],
-				emoji: EMOJIS[Math.floor(Math.random() * EMOJIS.length)],
-			}))
-		},
-
-		onSelect: (o) => {
-			document.querySelector("#title").innerHTML = `<span style="color: ${o.color}">${o.emoji} ${o.fruit}</span>`;
-			document.querySelector("#object").value = o.fruit;
-
-			// Whatever is returned here is set in the input box.
-			return o.fruit;
-		},
-
-		// If this callback is set, every search item (string or object) is passed to this function and its return
-		// value (DOMNode), is appended to the results box.
-		onRender: (o) => {
-			const dot = document.createElement("span");
-			dot.style = `width: 15px; height: 15px; border-radius: 100%; display: inline-block; margin-right: 10px; float: right; background: ${o.color}`;
-
-			const d = document.createElement("span");
-		    d.appendChild(dot);
-		    d.appendChild(document.createTextNode(o.emoji + " "));
-		    d.appendChild(document.createTextNode(o.fruit));
-
-		    return d;
 		}
 	});
 </script>