refactoring of autocomplete handling, #203

This commit is contained in:
azivner 2018-11-07 09:51:14 +01:00
parent 1febf5136c
commit a0f362457e
3 changed files with 38 additions and 49 deletions

View File

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

View File

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

View File

@ -12,10 +12,6 @@
<label for="jump-to-note-autocomplete">Note</label> <label for="jump-to-note-autocomplete">Note</label>
<div class="input-group"> <div class="input-group">
<input id="jump-to-note-autocomplete" class="form-control" placeholder="search for note by its name"> <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> </div>
</div> </div>