multiselect now also custom autocomplete

This is mainly to free space for the prompt history on #87

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>

css/ui/generic.css

@@ -145,6 +145,24 @@ div.autocomplete > .autocomplete-list > .autocomplete-option:hover {
 	background-color: #dddf;
 }
 
+div.autocomplete > .autocomplete-list > .autocomplete-option.selected::after {
+	content: "";
+
+	position: absolute;
+	right: 5px;
+	top: 0;
+
+	height: 100%;
+	aspect-ratio: 1;
+
+	background-color: darkgreen;
+
+	-webkit-mask-image: url("/res/icons/check.svg");
+	-webkit-mask-size: contain;
+	mask-image: url("/res/icons/check.svg");
+	mask-size: contain;
+}
+
 /* Select Input */
 select > option:checked::after {
 	content: "";

index.html

@@ -62,11 +62,7 @@
 						<textarea id="negPrompt"></textarea>
 					</div>
 					<label for="styleSelect">Styles:</label>
-					<select
-						id="styleSelect"
-						class="wideSelect"
-						onchange="changeStyles()"
-						multiple></select>
+					<div id="style-ac-mselect"></div>
 					<!-- <hr /> -->
 				</div>
 				<!-- SD section -->

js/index.js

@@ -447,6 +447,12 @@ const makeSlider = (
 	});
 };
 
+const styleAutoComplete = createAutoComplete(
+	"Style",
+	document.getElementById("style-ac-mselect"),
+	{multiple: true}
+);
+
 const modelAutoComplete = createAutoComplete(
 	"Model",
 	document.getElementById("models-ac-select")
@@ -797,28 +803,23 @@ async function getStyles() {
 			stored = [];
 		}
 
-		data.forEach((style) => {
-			const option = document.createElement("option");
-			option.classList.add("style-select-option");
-			option.text = style.name;
-			option.value = style.name;
-			option.title = `prompt: ${style.prompt}\nnegative: ${style.negative_prompt}`;
-			if (stored.length === 0) option.selected = style.name === "None";
-			else
-				option.selected = !!stored.find(
-					(styleName) => style.name === styleName
-				);
-
-			styleSelect.add(option);
-		});
-
-		changeStyles();
-
-		stored.forEach((styleName, index) => {
-			if (!data.findIndex((style) => style.name === styleName)) {
-				stored.splice(index, 1);
+		styleAutoComplete.options = data.map((style) => ({
+			name: style.name,
+			value: style.name,
+			title: `prompt: ${style.prompt}\nnegative: ${style.negative_prompt}`,
+		}));
+		styleAutoComplete.onchange.on(({value}) => {
+			let selected = [];
+			if (value.find((v) => v === "None")) {
+				styleAutoComplete.value = [];
+			} else {
+				selected = value;
 			}
+			stableDiffusionData.styles = selected;
+			localStorage.setItem("promptStyle", JSON.stringify(selected));
 		});
+
+		styleAutoComplete.value = stored;
 		localStorage.setItem("promptStyle", JSON.stringify(stored));
 	} catch (e) {
 		console.warn("[index] Failed to fetch prompt styles");

js/lib/ui.js

@@ -199,11 +199,13 @@ function createSlider(name, wrapper, options = {}) {
  * @param {string} name Name of the AutoComplete Select Element
  * @param {HTMLDivElement} wrapper The div element that will wrap the input elements
  * @param {object} options Extra options
- * @param {{name: string, value: string}} options.options Options to add to the selector
+ * @param {boolean} options.multiple Whether multiple options can be selected
+ * @param {{name: string, value: string}[]} options.options Options to add to the selector
  * @returns {AutoCompleteElement}
  */
 function createAutoComplete(name, wrapper, options = {}) {
 	defaultOpt(options, {
+		multiple: false,
 		options: [],
 	});
 
@@ -226,27 +228,46 @@ function createAutoComplete(name, wrapper, options = {}) {
 	const acobj = {
 		name,
 		wrapper,
-		_title: null,
-		_value: null,
+		_selectedOptions: new Set(),
 		_options: [],
 
 		/** @type {Observer<{name:string, value: string}>} */
 		onchange: new Observer(),
 
 		get value() {
-			return this._value;
+			const v = this._selectedOptions.map((opt) => opt.value);
+			return options.multiple ? v : v[0];
 		},
-		set value(val) {
+		set value(values) {
+			this._selectedOptions.clear();
+
+			for (const val of options.multiple ? values : [values]) {
 				const opt = this.options.find((option) => option.value === val);
 
-			if (!opt) return;
+				if (!opt) continue; // Ignore invalid options
 
-			this._title = opt.name;
-			this._value = opt.value;
-			inputEl.value = opt.name;
-			inputEl.title = opt.name;
+				this._selectedOptions.add(opt);
+			}
 
-			this.onchange.emit({name: opt.name, value: opt.value});
+			this._sync();
+		},
+
+		_sync() {
+			const val = Array.from(this._selectedOptions).map((opt) => opt.value);
+			const name = Array.from(this._selectedOptions).map((opt) => opt.name);
+
+			for (const opt of this._options) {
+				if (acobj._selectedOptions.has(opt))
+					opt.optionElement.classList.add("selected");
+				else opt.optionElement.classList.remove("selected");
+			}
+
+			updateInputField();
+
+			this.onchange.emit({
+				name: options.multiple ? name : name[0],
+				value: options.multiple ? val : val[0],
+			});
 		},
 
 		get options() {
@@ -261,15 +282,17 @@ function createAutoComplete(name, wrapper, options = {}) {
 
 			// Add options
 			val.forEach((opt) => {
-				const {name, value} = opt;
-				const option = {name, value};
+				const {name, value, title} = opt;
 
 				const optionEl = document.createElement("option");
 				optionEl.classList.add("autocomplete-option");
-				optionEl.title = option.name;
-				optionEl.addEventListener("click", () => select(option));
+				optionEl.title = title || name;
 
-				this._options.push({name, value, optionElement: optionEl});
+				const option = {name, value, optionElement: optionEl};
+
+				this._options.push(option);
+
+				optionEl.addEventListener("click", () => select(option));
 
 				autocompleteEl.appendChild(optionEl);
 			});
@@ -278,6 +301,15 @@ function createAutoComplete(name, wrapper, options = {}) {
 		},
 	};
 
+	function updateInputField() {
+		inputEl.value = Array.from(acobj._selectedOptions)
+			.map((o) => o.name)
+			.join(", ");
+		inputEl.title = Array.from(acobj._selectedOptions)
+			.map((o) => o.name)
+			.join(", ");
+	}
+
 	function updateOptions() {
 		const text = inputEl.value.toLowerCase().trim();
 
@@ -310,15 +342,26 @@ function createAutoComplete(name, wrapper, options = {}) {
 		});
 	}
 
-	function select(options) {
+	function select(opt) {
 		ontext = false;
+		if (!options.multiple) {
 			onlist = false;
-
-		acobj._title = options.name;
-		inputEl.value = options.name;
-		acobj.value = options.value;
-
+			acobj._selectedOptions.clear();
 			autocompleteEl.classList.add("display-none");
+			for (const child of autocompleteEl.children) {
+				child.classList.remove("selected");
+			}
+		}
+
+		if (options.multiple && acobj._selectedOptions.has(opt)) {
+			acobj._selectedOptions.delete(opt);
+			opt.optionElement.classList.remove("selected");
+		} else {
+			acobj._selectedOptions.add(opt);
+			opt.optionElement.classList.add("selected");
+		}
+
+		acobj._sync();
 	}
 
 	inputEl.addEventListener("focus", () => {
@@ -331,9 +374,7 @@ function createAutoComplete(name, wrapper, options = {}) {
 		ontext = false;
 
 		if (!onlist && !ontext) {
-			inputEl.value = "";
-			updateOptions();
-			inputEl.value = acobj._title;
+			updateInputField();
 
 			autocompleteEl.classList.add("display-none");
 		}
@@ -347,9 +388,7 @@ function createAutoComplete(name, wrapper, options = {}) {
 		onlist = false;
 
 		if (!onlist && !ontext) {
-			inputEl.value = "";
-			updateOptions();
-			inputEl.value = acobj._title;
+			updateInputField();
 
 			autocompleteEl.classList.add("display-none");
 		}