Dear all,
I have a small hobby website https://www.ars-neurochirurgica.com/ and use algolia search with autocomplete on it. I have an issue which I cannot solve: The search bar is loading incredible slow. Sometimes it loads 1-2sec slower than the rest of the website (you can see it if you visit the website) . Is there any chance I can make the experience more native and fast?
I would appreciate any help because I really like the algolia experience but like this it kind of disturbs the appearance of the website.
This is my javascript code:
import '@algolia/autocomplete-theme-classic';
import algoliasearch from 'algoliasearch/lite';
import { autocomplete } from '@algolia/autocomplete-js';
import { getAlgoliaResults } from '@algolia/autocomplete-js';
const searchClient = algoliasearch(
"XXX",
"YYY"
);
autocomplete({
container: "#searchbox",
detachedMediaQuery: "",
placeholder: "Suche",
getSources() {
return [{
sourceId: "links",
getItems({ query }) {
return getAlgoliaResults({
searchClient,
queries: [
{
indexName: "default",
query,
params: {
hitsPerPage: 10,
},
},
],
});
},
templates: {
item({ item, html, components}) {
return html`
<div class='ml-4 flex-auto'>
<p class='text-sm font-medium text-gray-700'>${components.Snippet({ hit: item, attribute: 'title' })}</p>
<p class='text-sm text-gray-500 truncate'>${components.Snippet({ hit: item, attribute: 'content' })}${components.Snippet({ hit: item, attribute: 'bard_field' })}</p>
</div>`;
},
},
onSelect: function (event) {
location.href = "https://www.ars-neurochirurgica.com"+event.item.url;
},
}];
},
renderNoResults({ state, render, html }, root) {
render(html`<div class="py-14 px-6 text-center text-sm sm:px-14" style=" width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;">
<svg class="mx-auto h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
</svg>
<p class="mt-4 font-semibold text-gray-900">Keine Einträge gefunden.</p>
<p class="mt-2 text-gray-500">Keine Einträge für den Suchbegriff ${state.query} gefunden.</p>
</div>
`, root);
},
});
and this is my html code:
<style>
:root {
--aa-detached-modal-max-width: 80%;
--aa-detached-modal-max-height: 50%;
--aa-primary-color-rgb: 30, 41,59;
--aa-description-highlight-background-color-rgb: 14,165,233;
--aa-input-background-color-rgb: 243, 244, 246;
}
mark {
background: none;
font-weight: 600;
color: rgb(14 165 233);
}
</style>
<div class="flex flex-1 items-center px-2 justify-center lg:ml-6 lg:justify-end">
<div class="w-full max-w-lg lg:max-w-xs">
<label for="searchbox" class="sr-only">Suche</label>
<div class="relative">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
</svg>
</div>
<span id="searchbox"></span>
</div>
</div>
</div>
