mirror of
https://github.com/philomena-dev/philomena.git
synced 2024-11-27 13:47:58 +01:00
Autocomplete fallback (#215)
* autocomplete: fallback to fetch if local returns no results * fix: don't show autocomplete if by the time fetch is complete value had already changed * autocomplete tag controller: lower images count req from 4 to 1
This commit is contained in:
parent
f5642d1d39
commit
921ad0c59a
2 changed files with 11 additions and 4 deletions
|
@ -134,16 +134,19 @@ function listenAutocomplete() {
|
||||||
document.addEventListener('input', event => {
|
document.addEventListener('input', event => {
|
||||||
removeParent();
|
removeParent();
|
||||||
fetchLocalAutocomplete(event);
|
fetchLocalAutocomplete(event);
|
||||||
|
window.clearTimeout(timeout);
|
||||||
|
|
||||||
if (localAc !== null && 'ac' in event.target.dataset) {
|
if (localAc !== null && 'ac' in event.target.dataset) {
|
||||||
inputField = event.target;
|
inputField = event.target;
|
||||||
originalTerm = `${inputField.value}`.toLowerCase();
|
originalTerm = `${inputField.value}`.toLowerCase();
|
||||||
|
|
||||||
const suggestions = localAc.topK(originalTerm, 5).map(({ name, imageCount }) => ({ label: `${name} (${imageCount})`, value: name }));
|
const suggestions = localAc.topK(originalTerm, 5).map(({ name, imageCount }) => ({ label: `${name} (${imageCount})`, value: name }));
|
||||||
return showAutocomplete(suggestions, originalTerm, event.target);
|
|
||||||
|
if (suggestions.length) {
|
||||||
|
return showAutocomplete(suggestions, originalTerm, event.target);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
window.clearTimeout(timeout);
|
|
||||||
// Use a timeout to delay requests until the user has stopped typing
|
// Use a timeout to delay requests until the user has stopped typing
|
||||||
timeout = window.setTimeout(() => {
|
timeout = window.setTimeout(() => {
|
||||||
inputField = event.target;
|
inputField = event.target;
|
||||||
|
@ -158,7 +161,11 @@ function listenAutocomplete() {
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
// inputField could get overwritten while the suggestions are being fetched - use event.target
|
// inputField could get overwritten while the suggestions are being fetched - use event.target
|
||||||
getSuggestions(fetchedTerm).then(suggestions => showAutocomplete(suggestions, fetchedTerm, event.target));
|
getSuggestions(fetchedTerm).then(suggestions => {
|
||||||
|
if (fetchedTerm === event.target.value) {
|
||||||
|
showAutocomplete(suggestions, fetchedTerm, event.target);
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, 300);
|
}, 300);
|
||||||
|
|
|
@ -30,7 +30,7 @@ defmodule PhilomenaWeb.Autocomplete.TagController do
|
||||||
|> Elasticsearch.search_records(preload(Tag, :aliased_tag))
|
|> Elasticsearch.search_records(preload(Tag, :aliased_tag))
|
||||||
|> Enum.map(&(&1.aliased_tag || &1))
|
|> Enum.map(&(&1.aliased_tag || &1))
|
||||||
|> Enum.uniq_by(& &1.id)
|
|> Enum.uniq_by(& &1.id)
|
||||||
|> Enum.filter(&(&1.images_count > 3))
|
|> Enum.filter(&(&1.images_count > 0))
|
||||||
|> Enum.sort_by(&(-&1.images_count))
|
|> Enum.sort_by(&(-&1.images_count))
|
||||||
|> Enum.take(5)
|
|> Enum.take(5)
|
||||||
|> Enum.map(&%{label: "#{&1.name} (#{&1.images_count})", value: &1.name})
|
|> Enum.map(&%{label: "#{&1.name} (#{&1.images_count})", value: &1.name})
|
||||||
|
|
Loading…
Reference in a new issue