From d42368ed665987da20a1086a4d82af9c1cf88a02 Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Thu, 11 Jan 2024 18:05:46 +0100
Subject: [PATCH] add an autocomple hint
---
components/AutocompleteMeiliFacets.vue | 10 ++++++++--
1 file changed, 8 insertions(+), 2 deletions(-)
diff --git a/components/AutocompleteMeiliFacets.vue b/components/AutocompleteMeiliFacets.vue
index 029d0ce5..fed95eeb 100644
--- a/components/AutocompleteMeiliFacets.vue
+++ b/components/AutocompleteMeiliFacets.vue
@@ -224,10 +224,16 @@ function isItemFilter(type: string | undefined) {
return type === "facet" || type === "innerOperator" || type === "outerOperator" || type === "value"
}
+const hint = ref<string>('All <span class="font-weight-bold">OR</span> in a row are grouped together. Example: <span class="font-weight-bold">brex OR avs AND Archea</span> ⇒ <span class="font-weight-bold">(brex OR avs) AND Archea</span>')
+
</script>
<template>
- <v-autocomplete :model-value="props.modelValue" @click:clear="clearFilters" v-bind="autocompleteProps"
- @update:focused="updateAutocompleteFocused" @update:modelValue="emitUpdateModelValue" :loading="!hasFacetDistribution" :disabled="!hasFacetDistribution">
+ <v-autocomplete :model-value="props.modelValue" @click:clear="clearFilters" v-bind="autocompleteProps" :hint="hint"
+ persistent-hint @update:focused="updateAutocompleteFocused" @update:modelValue="emitUpdateModelValue"
+ :loading="!hasFacetDistribution" :disabled="!hasFacetDistribution">
+ <template #message="{ message }">
+ <span v-html="message"></span>
+ </template>
<template #item="{ props, item }">
<v-list-item v-if="isItemFilter(item?.raw?.type)" v-bind="{ ...props, active: false }" :title="item.title"
:prepend-icon="item?.raw?.icon ? item.raw.icon : undefined"
--
GitLab