diff --git a/components/AutocompleteMeiliFacets.vue b/components/AutocompleteMeiliFacets.vue index 029d0ce56e38730fe4252dc479f49f8d42aeb6ca..fed95eeb55847f7041b242f50a044170ded88526 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"