From 925d6ee666a32d47dfc5f6bba2a27adca44ea0da Mon Sep 17 00:00:00 2001
From: maTh <1645099+math-GH@users.noreply.github.com>
Date: Tue, 1 Oct 2024 13:34:50 +0200
Subject: improved: 'My Labels' field be searchable (#6753)

* datalist-labels

* Update main.js
---
 app/views/index/global.phtml | 2 ++
 app/views/index/normal.phtml | 2 ++
 p/scripts/main.js            | 6 ++++++
 3 files changed, 10 insertions(+)

diff --git a/app/views/index/global.phtml b/app/views/index/global.phtml
index dd4749e24..717560fd2 100644
--- a/app/views/index/global.phtml
+++ b/app/views/index/global.phtml
@@ -14,6 +14,8 @@
 	}
 ?>
 
+<datalist id="datalist-labels"></datalist>
+
 <template id="share_article_template">
 	<?php $this->renderHelper('index/normal/entry_share_menu'); ?>
 	<a class="dropdown-close" href="#close">❌</a>
diff --git a/app/views/index/normal.phtml b/app/views/index/normal.phtml
index fe4af1a86..63d96e01f 100644
--- a/app/views/index/normal.phtml
+++ b/app/views/index/normal.phtml
@@ -16,6 +16,8 @@ $useKeepUnreadImportant = !FreshRSS_Context::isImportant() && !FreshRSS_Context:
 $today = @strtotime('today');
 ?>
 
+<datalist id="datalist-labels"></datalist>
+
 <template id="share_article_template">
 	<?php $this->renderHelper('index/normal/entry_share_menu'); ?>
 	<a class="dropdown-close" href="#close">❌</a>
diff --git a/p/scripts/main.js b/p/scripts/main.js
index 5ddca6bec..609e8ac80 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -1393,6 +1393,7 @@ function loadDynamicTags(div) {
 			const input_newTag = document.createElement('input');
 			input_newTag.setAttribute('type', 'text');
 			input_newTag.setAttribute('name', 'newTag');
+			input_newTag.setAttribute('list', 'datalist-labels');
 			input_newTag.addEventListener('keydown', function (ev) { if (ev.key.toUpperCase() == 'ENTER') { this.parentNode.previousSibling.click(); } });
 
 			const button_btn = document.createElement('button');
@@ -1416,6 +1417,7 @@ function loadDynamicTags(div) {
 		}
 
 		let html = '';
+		let datalist = '';
 		if (json && json.length) {
 			let nbLabelsChecked = 0;
 			for (let i = 0; i < json.length; i++) {
@@ -1432,12 +1434,16 @@ function loadDynamicTags(div) {
 					'name="t_' + tag.id + '"type="checkbox" ' +
 					(context.anonymous ? 'disabled="disabled" ' : '') +
 					(tag.checked ? 'checked="checked" ' : '') + '/> ' + tag.name + '</label></li>';
+				datalist += '<option value="' + tag.name + '"></option>';
 			}
 			if (context.anonymous && nbLabelsChecked === 0) {
 				html += '<li class="item"><span class="emptyLabels">' + context.i18n.labels_empty + '</span></li>';
 			}
 		}
 		div.querySelector('.dropdown-menu').insertAdjacentHTML('beforeend', html);
+		const datalistLabels = document.getElementById('datalist-labels');
+		datalistLabels.innerHTML = ''; // clear before add the (updated) labels list
+		datalistLabels.insertAdjacentHTML('beforeend', datalist);
 	};
 	req.send();
 }
-- 
cgit v1.2.3