note autocompletes now have clear text button

src/public/javascripts/services/note_autocomplete.js

@@ -16,6 +16,10 @@ async function autocompleteSource(term, cb) {
     cb(result);
 }
 
+function clearText($el) {
+    $el.val('').change();
+}
+
 function showRecentNotes($el) {
     $el.autocomplete("val", "");
     $el.autocomplete("open");
@@ -23,12 +27,20 @@ function showRecentNotes($el) {
 
 function initNoteAutocomplete($el) {
     if (!$el.hasClass("aa-input")) {
-        const $showRecentNotesButton = $("<div>").addClass("input-group-append").append(
+        const $clearTextButton = $("<span>")
-            $("<span>")
+                .addClass("input-group-text input-clearer-button jam jam-close")
-                .addClass("input-group-text show-recent-notes-button jam jam-clock")
+                .prop("title", "Clear text field");
-                .prop("title", "Show recent notes"));
 
-        $el.after($showRecentNotesButton);
+        const $showRecentNotesButton = $("<span>")
+                .addClass("input-group-text show-recent-notes-button jam jam-clock")
+                .prop("title", "Show recent notes");
+
+        $el.after($("<div>")
+            .addClass("input-group-append")
+            .append($clearTextButton)
+            .append($showRecentNotesButton));
+
+        $clearTextButton.click(() => clearText($el));
 
         $showRecentNotesButton.click(() => showRecentNotes($el));
 

src/public/stylesheets/style.css

@@ -451,6 +451,20 @@ html.theme-dark body {
 .show-recent-notes-button {
     cursor: pointer;
     font-size: 1.3em;
+    padding-left: 7px;
+    padding-right: 7px;
+}
+
+.input-clearer-button {
+    cursor: pointer;
+    font-size: 1.3em;
+    background: inherit !important;
+    padding-left: 5px;
+    padding-right: 7px;
+}
+
+.promoted-attribute-input.aa-input {
+    border-right: 0;
 }
 
 table.promoted-attributes-in-tooltip {