non-jquery autocomplete, needs more keyboard integration

.eslintrc.js

@@ -4,7 +4,6 @@ module.exports = {
 		commonjs: true,
 		es6: true,
 		node: true,
-		jquery: true,
 	},
 	extends: [
 		'airbnb-base',
@@ -30,7 +29,7 @@ module.exports = {
 			'error',
 			'tab',
 			{
-				SwitchCase: 1
+				SwitchCase: 1,
 			},
 		],
 		'no-tabs': 0,

gulp/publish-frontend.mjs

@@ -60,8 +60,6 @@ const compressJsData = () => src(jsSourcesData)
 	.pipe(dest(RESOURCES_PATH));
 
 const jsVendorSources = [
-	'server/scripts/vendor/auto/jquery.js',
-	'server/scripts/vendor/jquery.autocomplete.min.js',
 	'server/scripts/vendor/auto/nosleep.js',
 	'server/scripts/vendor/auto/swiped-events.js',
 	'server/scripts/vendor/auto/suncalc.js',

gulp/update-vendor.mjs

@@ -9,7 +9,6 @@ const vendorFiles = [
 	'./node_modules/luxon/build/es6/luxon.js',
 	'./node_modules/luxon/build/es6/luxon.js.map',
 	'./node_modules/nosleep.js/dist/NoSleep.js',
-	'./node_modules/jquery/dist/jquery.js',
 	'./node_modules/suncalc/suncalc.js',
 	'./node_modules/swiped-events/src/swiped-events.js',
 ];

package-lock.json

@@ -27,8 +27,6 @@
 				"gulp-s3-upload": "^1.7.3",
 				"gulp-sass": "^5.1.0",
 				"gulp-terser": "^2.0.0",
-				"jquery": "^3.6.0",
-				"jquery-touchswipe": "^1.6.19",
 				"luxon": "^3.0.0",
 				"nosleep.js": "^0.12.0",
 				"sass": "^1.54.0",
@@ -6494,19 +6492,6 @@
 				"node": ">= 0.6.0"
 			}
 		},
-		"node_modules/jquery": {
-			"version": "3.7.1",
-			"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
-			"integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
-			"dev": true,
-			"license": "MIT"
-		},
-		"node_modules/jquery-touchswipe": {
-			"version": "1.6.19",
-			"resolved": "https://registry.npmjs.org/jquery-touchswipe/-/jquery-touchswipe-1.6.19.tgz",
-			"integrity": "sha512-b0BGje9reNRU3u6ksAK9QqnX7yBRgLNe/wYG7DOfyDlhBlYjayIT8bSOHmcuvptIDW/ubM9CTW/mnZf9Rohuow==",
-			"dev": true
-		},
 		"node_modules/js-yaml": {
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",

package.json

@@ -21,8 +21,6 @@
 	"homepage": "https://github.com/netbymatt/ws4kp#readme",
 	"devDependencies": {
 		"del": "^7.1.0",
-		"jquery": "^3.6.0",
-		"jquery-touchswipe": "^1.6.19",
 		"luxon": "^3.0.0",
 		"nosleep.js": "^0.12.0",
 		"suncalc": "^1.8.0",

server/scripts/index.mjs

@@ -6,6 +6,7 @@ import {
 import { round2 } from './modules/utils/units.mjs';
 import { parseQueryString } from './modules/share.mjs';
 import settings from './modules/settings.mjs';
+import AutoComplete from './modules/autocomplete.mjs';
 
 document.addEventListener('DOMContentLoaded', () => {
 	init();
@@ -56,7 +57,7 @@ const init = () => {
 	document.addEventListener('keydown', documentKeydown);
 	document.addEventListener('touchmove', (e) => { if (document.fullscreenElement) e.preventDefault(); });
 
-	$(TXT_ADDRESS_SELECTOR).devbridgeAutocomplete({
+	const autoComplete = new AutoComplete(document.querySelector(TXT_ADDRESS_SELECTOR), {
 		serviceUrl: 'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest',
 		deferRequestBy: 300,
 		paramName: 'text',
@@ -76,13 +77,12 @@ const init = () => {
 		minChars: 3,
 		showNoSuggestionNotice: true,
 		noSuggestionNotice: 'No results found. Please try a different search string.',
-		onSelect(suggestion) { autocompleteOnSelect(suggestion, this); },
+		onSelect(suggestion) { autocompleteOnSelect(suggestion); },
 		width: 490,
 	});
 
 	const formSubmit = () => {
-		const ac = $(TXT_ADDRESS_SELECTOR).devbridgeAutocomplete();
+		if (autoComplete.suggestions[0]) autoComplete.suggestionsContainer.children[0].trigger('click');
-		if (ac.suggestions[0]) $(ac.suggestionsContainer.children[0]).trigger('click');
 		return false;
 	};
 
@@ -133,10 +133,7 @@ const init = () => {
 	document.querySelector('#container').addEventListener('swiped-right', () => swipeCallBack('right'));
 };
 
-const autocompleteOnSelect = async (suggestion, elem) => {
+const autocompleteOnSelect = async (suggestion) => {
-	// Do not auto get the same city twice.
-	if (elem.previousSuggestionValue === suggestion.value) return;
-
 	const data = await json('https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find', {
 		data: {
 			text: suggestion.value,

server/scripts/modules/autocomplete.mjs

@@ -0,0 +1,229 @@
+/* eslint-disable default-case */
+import { json } from './utils/fetch.mjs';
+
+const KEYS = {
+	ESC: 27,
+	TAB: 9,
+	RETURN: 13,
+	LEFT: 37,
+	UP: 38,
+	RIGHT: 39,
+	DOWN: 40,
+};
+
+const DEFAULT_OPTIONS = {
+	autoSelectFirst: false,
+	serviceUrl: null,
+	lookup: null,
+	onSelect: null,
+	onHint: null,
+	width: 'auto',
+	minChars: 1,
+	maxHeight: 300,
+	deferRequestBy: 0,
+	params: {},
+	delimiter: null,
+	zIndex: 9999,
+	type: 'GET',
+	noCache: false,
+	preserveInput: false,
+	containerClass: 'autocomplete-suggestions',
+	tabDisabled: false,
+	dataType: 'text',
+	currentRequest: null,
+	triggerSelectOnValidInput: true,
+	preventBadQueries: true,
+	paramName: 'query',
+	transformResult: (a) => a,
+	showNoSuggestionNotice: false,
+	noSuggestionNotice: 'No results',
+	orientation: 'bottom',
+	forceFixPosition: false,
+};
+
+const escapeRegExChars = (string) => string.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&');
+
+const formatResult = (suggestion, search) => {
+	// Do not replace anything if the current value is empty
+	if (!search) {
+		return suggestion;
+	}
+
+	const pattern = `(${escapeRegExChars(search)})`;
+
+	return suggestion
+		.replace(new RegExp(pattern, 'gi'), '<strong>$1</strong>')
+		.replace(/&/g, '&amp;')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;')
+		.replace(/&lt;(\/?strong)&gt;/g, '<$1>');
+};
+
+class AutoComplete {
+	constructor(elem, options) {
+		this.options = { ...DEFAULT_OPTIONS, ...options };
+		this.elem = elem;
+		this.selectedItem = -1;
+		this.onChangeTimeout = null;
+		this.currentValue = '';
+		this.suggestions = [];
+		this.cachedResponses = {};
+
+		// create and add the results container
+		const results = document.createElement('div');
+		results.style.display = 'none';
+		results.classList.add(this.options.containerClass);
+		results.style.width = (typeof this.options.width === 'string') ? this.options.width : `${this.options.width}px`;
+		results.style.zIndex = this.options.zIndex;
+		results.style.maxHeight = `${this.options.maxHeight}px`;
+		results.style.overflowX = 'hidden';
+		results.addEventListener('mouseover', (e) => this.mouseOver(e));
+		results.addEventListener('mouseout', (e) => this.mouseOut(e));
+		results.addEventListener('click', (e) => this.click(e));
+
+		this.results = results;
+		this.elem.after(results);
+
+		// add handlers for typing text
+		this.elem.addEventListener('keyup', (e) => this.keyUp(e));
+	}
+
+	mouseOver(e) {
+		// suggestion line
+		if (e.target?.classList?.contains('suggestion')) {
+			e.target.classList.add('selected');
+			this.selectedItem = parseInt(e.target.dataset.item, 10);
+		}
+	}
+
+	mouseOut(e) {
+		// suggestion line
+		if (e.target?.classList?.contains('suggestion')) {
+			e.target.classList.remove('selected');
+			this.selectedItem = -1;
+		}
+	}
+
+	click(e) {
+		// suggestion line
+		if (e.target?.classList?.contains('suggestion')) {
+			// get the entire suggestion
+			const suggestion = this.suggestions[parseInt(e.target.dataset.item, 10)];
+			this.options.onSelect(suggestion);
+			this.elem.value = suggestion.value;
+			this.hideSuggestions();
+		}
+	}
+
+	hideSuggestions() {
+		this.results.style.display = 'none';
+	}
+
+	showSuggestions() {
+		this.results.style.removeProperty('display');
+	}
+
+	clearSuggestions() {
+		this.results.innerHTML = '';
+	}
+
+	keyUp(e) {
+		// ignore some keys
+		switch (e.which) {
+			case KEYS.UP:
+			case KEYS.DOWN:
+				return;
+		}
+
+		clearTimeout(this.onChangeTimeout);
+
+		if (this.currentValue !== this.elem.value) {
+			if (this.options.deferRequestBy > 0) {
+				// defer lookup during rapid key presses
+				this.onChangeTimeout = setTimeout(() => {
+					this.onValueChange();
+				}, this.options.deferRequestBy);
+			}
+		}
+	}
+
+	onValueChange() {
+		clearTimeout(this.onValueChange);
+
+		// confirm value actually changed
+		if (this.currentValue === this.elem.value) return;
+		// store new value
+		this.currentValue = this.elem.value;
+
+		// clear the selected index
+		this.selectedItem = -1;
+		this.results.querySelectorAll('div').forEach((elem) => elem.classList.remove('selected'));
+
+		// if less than minimum don't query api
+		if (this.currentValue.length < this.options.minChars) {
+			this.hideSuggestions();
+			return;
+		}
+
+		this.getSuggestions(this.currentValue);
+	}
+
+	async getSuggestions(search) {
+		// assemble options
+		const searchOptions = { ...this.options.params };
+		searchOptions[this.options.paramName] = search;
+
+		// build search url
+		const url = new URL(this.options.serviceUrl);
+		Object.entries(searchOptions).forEach(([key, value]) => {
+			url.searchParams.append(key, value);
+		});
+
+		let result = this.cachedResponses[search];
+		if (!result) {
+			// make the request
+			const resultRaw = await json(url);
+
+			// use the provided parser
+			result = this.options.transformResult(resultRaw);
+		}
+
+		// store suggestions
+		this.cachedResponses[search] = result.suggestions;
+		this.suggestions = result.suggestions;
+
+		// populate the suggestion area
+		this.populateSuggestions();
+	}
+
+	populateSuggestions() {
+		if (this.suggestions.length === 0) {
+			if (this.options.showNoSuggestionNotice) {
+				this.noSuggestionNotice();
+			} else {
+				this.hideSuggestions();
+			}
+			return;
+		}
+
+		// build the list
+		const suggestionElems = this.suggestions.map((suggested, idx) => {
+			const elem = document.createElement('div');
+			elem.classList.add('suggestion');
+			elem.dataset.item = idx;
+			elem.innerHTML = (formatResult(suggested.value, this.currentValue));
+			return elem.outerHTML;
+		});
+
+		this.results.innerHTML = suggestionElems.join('');
+		this.showSuggestions();
+	}
+
+	noSuggestionNotice() {
+		this.results.innerHTML = `<div>${this.options.noSuggestionNotice}</div>`;
+		this.showSuggestions();
+	}
+}
+
+export default AutoComplete;

server/styles/scss/_page.scss

@@ -106,25 +106,28 @@ body {
 .autocomplete-suggestions {
 	background-color: #ffffff;
 	border: 1px solid #000000;
+	position: absolute;
+	z-index: 9999;
 
 	@media (prefers-color-scheme: dark) {
 		background-color: #000000;
 	}
 
-	.autocomplete-suggestion {
+	div {
 		/*padding: 2px 5px;*/
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		font-size: 16pt;
-	}
 
-	.autocomplete-selected {
+		&.selected {
 			background-color: #0000ff;
 			color: #ffffff;
 		}
 	}
 
+}
+
 #divTwc {
 	display: block;
 	background-color: #000000;

views/index.ejs

@@ -5,7 +5,8 @@
 <head>
 	<meta charset="utf-8" />
 	<title>WeatherStar 4000+</title>
-  <meta name="description" content="Web based WeatherStar 4000 simulator that reports current and forecast weather conditions plus a few extras!" />
+	<meta name="description"
+		content="Web based WeatherStar 4000 simulator that reports current and forecast weather conditions plus a few extras!" />
 	<meta name="keywords" content="WeatherStar 4000+" />
 	<meta name="author" content="Matt Walsh" />
 	<meta name="application-name" content="WeatherStar 4000+" />
@@ -23,8 +24,6 @@
 		<script type="text/javascript" src="scripts/custom.js?_=<%=production%>"></script>
 		<% } else { %>
 			<link rel="stylesheet" type="text/css" href="styles/main.css" />
-  <script type="text/javascript" src="scripts/vendor/auto/jquery.js"></script>
-  <script type="text/javascript" src="scripts/vendor/jquery.autocomplete.min.js"></script>
 			<script type="text/javascript" src="scripts/vendor/auto/nosleep.js"></script>
 			<script type="text/javascript" src="scripts/vendor/auto/swiped-events.js"></script>
 			<script type="text/javascript" src="scripts/vendor/auto/suncalc.js"></script>
@@ -63,7 +62,8 @@
 	<div id="divQuery">
 		<input id="txtAddress" type="text" value="" placeholder="Zip or City, State" />
 		<div class="buttons">
-			<button id="btnGetGps" type="button" title="Get GPS Location"><img src="images/nav/ic_gps_fixed_black_18dp_1x.png" class="light"/>
+			<button id="btnGetGps" type="button" title="Get GPS Location"><img src="images/nav/ic_gps_fixed_black_18dp_1x.png"
+					class="light" />
 				<img src="images/nav/ic_gps_fixed_white_18dp_1x.png" class="dark" />
 			</button>
 			<button id="btnGetLatLng" type="submit">GO</button>
@@ -123,7 +123,8 @@
 		<div id="divTwcBottom">
 			<div id="divTwcBottomLeft">
 				<img id="NavigateMenu" class="navButton" src="images/nav/ic_menu_white_24dp_2x.png" title="Menu" />
-        <img id="NavigatePrevious" class="navButton" src="images/nav/ic_skip_previous_white_24dp_2x.png" title="Previous" />
+				<img id="NavigatePrevious" class="navButton" src="images/nav/ic_skip_previous_white_24dp_2x.png"
+					title="Previous" />
 				<img id="NavigateNext" class="navButton" src="images/nav/ic_skip_next_white_24dp_2x.png" title="Next" />
 				<img id="NavigatePlay" class="navButton" src="images/nav/ic_play_arrow_white_24dp_2x.png" title="Play" />
 			</div>
@@ -131,7 +132,8 @@
 				<img id="NavigateRefresh" class="navButton" src="images/nav/ic_refresh_white_24dp_2x.png" title="Refresh" />
 			</div>
 			<div id="divTwcBottomRight">
-        <img id="ToggleFullScreen" class="navButton" src="images/nav/ic_fullscreen_white_24dp_2x.png" title="Enter Fullscreen" />
+				<img id="ToggleFullScreen" class="navButton" src="images/nav/ic_fullscreen_white_24dp_2x.png"
+					title="Enter Fullscreen" />
 			</div>
 		</div>
 	</div>
@@ -156,7 +158,8 @@
 		<a href='' id='share-link'>Copy Permalink</a> <span id="share-link-copied">Link copied to clipboard!</span>
 		<div id="share-link-instructions">
 			Copy this long URL:
-			<input type='text' id="share-link-url"></div>
+			<input type='text' id="share-link-url">
+		</div>
 	</div>
 	</div>
 
@@ -170,7 +173,8 @@
 
 	<div id="divRefresh">
 		Last Update: <span id="spanLastRefresh">(None)</span><br />
-    <input id="chkAutoRefresh" name="chkAutoRefresh" type="checkbox" /><label id="lblRefreshCountDown" for="chkAutoRefresh">Auto Refresh: <span id="spanRefreshCountDown">--:--</span></label>
+		<input id="chkAutoRefresh" name="chkAutoRefresh" type="checkbox" /><label id="lblRefreshCountDown"
+			for="chkAutoRefresh">Auto Refresh: <span id="spanRefreshCountDown">--:--</span></label>
 	</div>
 
 </body>