refactoring of autocomplete handling, #203

src/public/javascripts/dialogs/jump_to_note.js

@@ -1,7 +1,6 @@
 import treeService from '../services/tree.js';
 import searchNotesService from '../services/search_notes.js';
-import noteautocompleteService from '../services/note_autocomplete.js';
-import linkService from "../services/link.js";
+import noteAutocompleteService from '../services/note_autocomplete.js';
 
 const $dialog = $("#jump-to-note-dialog");
 const $autoComplete = $("#jump-to-note-autocomplete");
@@ -17,33 +16,18 @@ async function showDialog() {
 
     $dialog.modal();
 
-    $autoComplete.autocomplete({
-        appendTo: document.querySelector('body'),
-        hint: false,
-        autoselect: true,
-        openOnFocus: true,
-        minLength: 0
-    }, [
-        {
-            source: noteautocompleteService.autocompleteSource,
-            displayKey: 'title',
-            templates: {
-                suggestion: function(suggestion) {
-                    return suggestion.title;
-                }
+    noteAutocompleteService.initNoteAutocomplete($autoComplete)
+        .on('autocomplete:selected', function(event, suggestion, dataset) {
+            if (!suggestion.path) {
+                return false;
             }
-        }
-    ]).on('autocomplete:selected', function(event, suggestion, dataset) {
-        if (!suggestion.path) {
-            return false;
-        }
 
-        treeService.activateNote(suggestion.path);
+            treeService.activateNote(suggestion.path);
 
-        $dialog.modal('hide');
-    });
+            $dialog.modal('hide');
+        });
 
-    showRecentNotes();
+    noteAutocompleteService.showRecentNotes($autoComplete);
 }
 
 function showInFullText(e) {
@@ -60,14 +44,11 @@ function showInFullText(e) {
     $dialog.modal('hide');
 }
 
-function showRecentNotes() {
-    $autoComplete.autocomplete("val", "");
-    $autoComplete.autocomplete("open");
-}
+
 
 $showInFullTextButton.click(showInFullText);
 
-$showRecentNotesButton.click(showRecentNotes);
+$showRecentNotesButton.click(noteAutocompleteService.showRecentNotes);
 
 $dialog.bind('keydown', 'ctrl+return', showInFullText);
 

src/public/javascripts/services/note_autocomplete.js

@@ -16,8 +16,13 @@ async function autocompleteSource(term, cb) {
     cb(result);
 }
 
-async function initNoteAutocomplete($el) {
-    if (!$el.hasClass("ui-autocomplete-input")) {
+function showRecentNotes($el) {
+    $el.autocomplete("val", "");
+    $el.autocomplete("open");
+}
+
+function initNoteAutocomplete($el) {
+    if (!$el.hasClass("aa-input")) {
         const $showRecentNotesButton = $("<div>").addClass("input-group-append").append(
             $("<span>")
                 .addClass("input-group-text show-recent-notes-button")
@@ -25,22 +30,28 @@ async function initNoteAutocomplete($el) {
 
         $el.after($showRecentNotesButton);
 
-        $showRecentNotesButton.click(() => $el.autocomplete("search", ""));
+        $showRecentNotesButton.click(() => showRecentNotes($el));
 
-        await $el.autocomplete({
-            appendTo: $el.parent().parent(),
-            source: autocompleteSource,
-            minLength: 0,
-            change: function (event, ui) {
-                $el.trigger("change");
-            },
-            select: function (event, ui) {
-                if (ui.item.value === 'No results') {
-                    return false;
+        $el.autocomplete({
+            appendTo: document.querySelector('body'),
+            hint: false,
+            autoselect: true,
+            openOnFocus: true,
+            minLength: 0
+        }, [
+            {
+                source: autocompleteSource,
+                displayKey: 'title',
+                templates: {
+                    suggestion: function(suggestion) {
+                        return suggestion.title;
+                    }
                 }
             }
-        });
+        ]);
     }
+
+    return $el;
 }
 
 ko.bindingHandlers.noteAutocomplete = {
@@ -51,5 +62,6 @@ ko.bindingHandlers.noteAutocomplete = {
 
 export default {
     initNoteAutocomplete,
-    autocompleteSource
+    autocompleteSource,
+    showRecentNotes
 }

src/views/dialogs/jump_to_note.ejs

@@ -12,10 +12,6 @@
           <label for="jump-to-note-autocomplete">Note</label>
           <div class="input-group">
             <input id="jump-to-note-autocomplete" class="form-control" placeholder="search for note by its name">
-
-            <div class="input-group-append">
-              <span class="input-group-text show-recent-notes-button" title="Show recent notes"></span>
-            </div>
           </div>
         </div>
       </div>