add an autocomple hint

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> &rArr; <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"