porting autocomplete to algolia, WIP, #203

src/public/javascripts/dialogs/jump_to_note.js

@@ -8,6 +8,8 @@ const $autoComplete = $("#jump-to-note-autocomplete");
 const $showInFullTextButton = $("#show-in-full-text-button");
 const $showRecentNotesButton = $dialog.find(".show-recent-notes-button");
 
+$dialog.on("shown.bs.modal", e => $autoComplete.focus());
+
 async function showDialog() {
     glob.activeDialog = $dialog;
 
@@ -15,25 +17,55 @@ async function showDialog() {
 
     $dialog.modal();
 
-    await $autoComplete.autocomplete({
-        source: noteautocompleteService.autocompleteSource,
-        focus: event => event.preventDefault(),
-        minLength: 0,
-        autoFocus: true,
-        select: function (event, ui) {
-            if (ui.item.value === 'No results') {
-                return false;
+    $autoComplete.autocomplete({
+        appendTo: document.querySelector('body'),
+        hint: false,
+        autoselect: true,
+        openOnFocus: true
+    }, [
+        {
+            source: noteautocompleteService.autocompleteSource,
+            displayKey: 'label',
+            templates: {
+                suggestion: function(suggestion) {
+                    return suggestion.label;
+                }
             }
-
-            const notePath = linkService.getNotePathFromLabel(ui.item.value);
-
-            treeService.activateNote(notePath);
-
-            $dialog.modal('hide');
         }
+    ]).on('autocomplete:selected', function(event, suggestion, dataset) {
+        console.log("selected: ", event, suggestion, dataset);
+        return;
+
+        if (ui.item.value === 'No results') {
+            return false;
+        }
+
+        const notePath = linkService.getNotePathFromLabel(ui.item.value);
+
+        treeService.activateNote(notePath);
+
+        $dialog.modal('hide');
     });
 
-    showRecentNotes();
+    // await $autoComplete.autocomplete({
+    //     source: noteautocompleteService.autocompleteSource,
+    //     focus: event => event.preventDefault(),
+    //     minLength: 0,
+    //     autoFocus: true,
+    //     select: function (event, ui) {
+    //         if (ui.item.value === 'No results') {
+    //             return false;
+    //         }
+    //
+    //         const notePath = linkService.getNotePathFromLabel(ui.item.value);
+    //
+    //         treeService.activateNote(notePath);
+    //
+    //         $dialog.modal('hide');
+    //     }
+    // });
+
+    //showRecentNotes();
 }
 
 function showInFullText(e) {

src/public/javascripts/services/note_autocomplete.js

@@ -1,13 +1,13 @@
 import server from "./server.js";
 import noteDetailService from "./note_detail.js";
 
-async function autocompleteSource(request, response) {
+async function autocompleteSource(term, cb) {
     const result = await server.get('autocomplete'
-        + '?query=' + encodeURIComponent(request.term)
+        + '?query=' + encodeURIComponent(term)
         + '&currentNoteId=' + noteDetailService.getCurrentNoteId());
 
     if (result.length > 0) {
-        response(result.map(row => {
+        cb(result.map(row => {
             return {
                 label: row.label,
                 value: row.label + ' (' + row.value + ')'
@@ -15,7 +15,7 @@ async function autocompleteSource(request, response) {
         }));
     }
     else {
-        response([{
+        cb([{
             label: "No results",
             value: "No results"
         }]);

src/public/stylesheets/style.css

@@ -539,4 +539,35 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
 
 .tooltip.show {
     opacity: 1;
-}
+}
+
+.algolia-autocomplete {
+    width: calc(100% - 30px);
+    z-index: 2000 !important;
+}
+
+.algolia-autocomplete .aa-input, .algolia-autocomplete .aa-hint {
+    width: 100%;
+}
+
+.algolia-autocomplete .aa-dropdown-menu {
+    width: 100%;
+    background-color: #fff;
+    border: 1px solid #999;
+    border-top: none;
+    z-index: 2000 !important;
+    max-height: 500px;
+    overflow: auto;
+    padding: 0;
+    margin: 0;
+}
+
+.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
+    cursor: pointer;
+    padding: 5px;
+    margin: 0;
+}
+
+.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
+    background-color: #B2D7FF;
+}

src/views/index.ejs

@@ -348,6 +348,8 @@
 
     <script src="/libraries/knockout.min.js"></script>
 
+    <script src="/libraries/autocomplete.jquery.min.js"></script>
+
     <link href="/stylesheets/style.css" rel="stylesheet">
 
     <script src="/javascripts/services/bootstrap.js" type="module"></script>