mirror of
https://github.com/philomena-dev/philomena.git
synced 2025-03-15 16:10:03 +01:00
Support calling autocomplete on textarea
This commit is contained in:
parent
d6e360a3a5
commit
9ec847e1c9
1 changed files with 8 additions and 6 deletions
|
@ -9,7 +9,9 @@ import { TermContext } from './query/lex';
|
||||||
import { $$ } from './utils/dom';
|
import { $$ } from './utils/dom';
|
||||||
import { fetchLocalAutocomplete, fetchSuggestions, SuggestionsPopup, TermSuggestion } from './utils/suggestions';
|
import { fetchLocalAutocomplete, fetchSuggestions, SuggestionsPopup, TermSuggestion } from './utils/suggestions';
|
||||||
|
|
||||||
let inputField: HTMLInputElement | null = null,
|
type InputFieldElement = HTMLInputElement | HTMLTextAreaElement;
|
||||||
|
|
||||||
|
let inputField: InputFieldElement | null = null,
|
||||||
originalTerm: string | undefined,
|
originalTerm: string | undefined,
|
||||||
originalQuery: string | undefined,
|
originalQuery: string | undefined,
|
||||||
selectedTerm: TermContext | null = null;
|
selectedTerm: TermContext | null = null;
|
||||||
|
@ -105,7 +107,7 @@ function keydownHandler(event: KeyboardEvent) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function findSelectedTerm(targetInput: HTMLInputElement, searchQuery: string): TermContext | null {
|
function findSelectedTerm(targetInput: InputFieldElement, searchQuery: string): TermContext | null {
|
||||||
if (targetInput.selectionStart === null || targetInput.selectionEnd === null) return null;
|
if (targetInput.selectionStart === null || targetInput.selectionEnd === null) return null;
|
||||||
|
|
||||||
const selectionIndex = Math.min(targetInput.selectionStart, targetInput.selectionEnd);
|
const selectionIndex = Math.min(targetInput.selectionStart, targetInput.selectionEnd);
|
||||||
|
@ -117,7 +119,7 @@ function findSelectedTerm(targetInput: HTMLInputElement, searchQuery: string): T
|
||||||
function toggleSearchAutocomplete() {
|
function toggleSearchAutocomplete() {
|
||||||
const enable = store.get('enable_search_ac');
|
const enable = store.get('enable_search_ac');
|
||||||
|
|
||||||
for (const searchField of $$<HTMLInputElement>('input[data-ac-mode=search]')) {
|
for (const searchField of $$<InputFieldElement>(':is(input, textarea)[data-ac-mode=search]')) {
|
||||||
if (enable) {
|
if (enable) {
|
||||||
searchField.autocomplete = 'off';
|
searchField.autocomplete = 'off';
|
||||||
} else {
|
} else {
|
||||||
|
@ -144,13 +146,13 @@ function listenAutocomplete() {
|
||||||
loadAutocompleteFromEvent(event);
|
loadAutocompleteFromEvent(event);
|
||||||
window.clearTimeout(serverSideSuggestionsTimeout);
|
window.clearTimeout(serverSideSuggestionsTimeout);
|
||||||
|
|
||||||
if (!(event.target instanceof HTMLInputElement)) return;
|
if (!(event.target instanceof HTMLInputElement) && !(event.target instanceof HTMLTextAreaElement)) return;
|
||||||
|
|
||||||
const targetedInput = event.target;
|
const targetedInput = event.target;
|
||||||
|
|
||||||
if (!targetedInput.dataset.ac) return;
|
if (!targetedInput.dataset.ac) return;
|
||||||
|
|
||||||
targetedInput.addEventListener('keydown', keydownHandler);
|
targetedInput.addEventListener('keydown', keydownHandler as EventListener);
|
||||||
|
|
||||||
if (localAc !== null) {
|
if (localAc !== null) {
|
||||||
inputField = targetedInput;
|
inputField = targetedInput;
|
||||||
|
@ -212,7 +214,7 @@ function listenAutocomplete() {
|
||||||
});
|
});
|
||||||
|
|
||||||
function loadAutocompleteFromEvent(event: Event) {
|
function loadAutocompleteFromEvent(event: Event) {
|
||||||
if (!(event.target instanceof HTMLInputElement)) return;
|
if (!(event.target instanceof HTMLInputElement) && !(event.target instanceof HTMLTextAreaElement)) return;
|
||||||
|
|
||||||
if (!isLocalLoading && event.target.dataset.ac) {
|
if (!isLocalLoading && event.target.dataset.ac) {
|
||||||
isLocalLoading = true;
|
isLocalLoading = true;
|
||||||
|
|
Loading…
Add table
Reference in a new issue