I have developed a web app with VueJS (Composition API) and use Algolia as my search engine. I followed the guidelines from Algolia to build a component for autocomplete and though it works, I get this strange warning in the console:
The attribute "city" described by the path ["city"] does not exist on the hit. Did you set it in attributesToHighlight
?
"City" is defined as a searchable attribute and it is defined in my component as attributeToHighlight. When I use the autocomplete search and search for a city name, it does get highlighted, so I really don't understand why I get the warning.
This is the autocomplete component:
<template>
<div id="autocomplete" />
</template>
<script setup>
import { algoliaSearchClient } from 'boot/algolia'
import { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js'
import { onMounted } from 'vue'
import '@algolia/autocomplete-theme-classic'
const INDEX_NAME = 'companies'
onMounted(async () => {
autocomplete({
container: '#autocomplete',
placeholder: 'Search company',
getSources ({ query }) {
return [{
sourceId: INDEX_NAME,
getItems () {
const results = getAlgoliaResults({
searchClient: algoliaSearchClient,
queries: [{
indexName: INDEX_NAME,
query,
params: {
hitsPerPage: 5,
attributesToSnippet: [],
attributesToHighlight: ['name', 'city'],
snippetEllipsisText: '…'
}
}]
})
// console.log('Algolia results: ', results)
return results
},
templates: {
item ({ item, components, html }) {
return html`
<div class="aa-ItemWrapper">
<div class="aa-ItemContent">
<div class="aa-ItemContentBody">
<div class="aa-ItemContentTitle">
${components.Highlight({
hit: item,
attribute: 'name'
})}
</div>
<div class="aa-ItemContentDescription">
${components.Highlight({
hit: item,
attribute: 'city'
})}
</div>
</div>
<div class="aa-ItemActions">
<button
class="aa-ItemActionButton aa-DesktopOnly aa-ActiveOnly"
type="button"
title="Select"
>
<svg
viewBox="0 0 24 24"
width="20"
height="20"
fill="currentColor"
>
<path
d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z"
/>
</svg>
</button>
</div>
</div>
</div>
`
}
}
}]
}
})
})
</script>
In my boot/algolia file, this is the definition of the 'companies' index:
companyIndex.setSettings({
// Select the attributes you want to search in
searchableAttributes: [
'city',
'country.label',
'companyType.label',
'companyNo',
'contacts',
'customerSince',
'description',
'duns',
'facebook',
'fullAddress',
'healthScore',
'industry.label',
'instagram',
'isReference',
'linkedin',
'name',
'notes',
'numOfContacts',
'numOfOpportunities',
'objectType',
'objectLabel',
'opportunities',
'phone',
'solutions',
'state',
'streetLine1',
'streetLine2',
'website',
'zipcode'
],
// Set up some attributes to filter results on
attributesForFaceting: [
'searchable(country.label)',
'searchable(companyType.label)',
'searchable(industry.label)',
'healthScore',
'isReference',
'objectType'
]
})
The search index works without a problem. See these screenshots:
You don't have to add attributes for highlighting. By default all searchable attributes will get highlighted:
Does anybody have an idea why I get the warning and how to get rid of it?
Having checked all my company records I suspect (couldn't find them though) there were records in the Algolia index that missed the attribute "city". Having registered a city for all companies (or an empty string) via my app's UI has made the warning disappear.