I have an Algolia Vue instantsearch page that looks like this:
<template>
<ais-instant-search>
<ais-search-box v-slot="{ currentRefinement, isSearchStalled, refine }">
<input
id="keywords"
:value="currentRefinement"
@input="refine($event.currentTarget.value)"
/>
</ais-search-box>
<ais-menu-select
v-slot="{ items, canRefine, refine }"
attribute="categories"
>
<Select
:items="items"
:can-refine="canRefine"
:refine="refine"
/>
</ais-menu-select>
<ais-refinement-list
attribute="title"
:sort-by="['name:asc']"
:transform-items="transformItems"
>
</ais-refinement-list>
<ais-hits v-slot="{ items }" :transform-items="shuffle">
<Result v-for="item in items" :key="item.objectID" :result="item" />
</ais-hits>
</ais-instant-search>
</template>
<script>
import algoliasearch from 'algoliasearch/lite';
import { AisRefinementList } from 'vue-instantsearch';
import Result from '@/components/Result.vue';
import Select from '@/components/Select.vue';
export default {
components: {
AisRefinementList,
Result,
Select
},
methods: {
shuffle(items) {
for (
let j, x, i = items.length;
i;
j = Math.floor(Math.random() * i), x = items[--i], items[i] = items[j], items[j] = x
);
return items;
},
}
};
</script>
You can see that ais-hits has a shuffle method on transform-items which randomises the results. Which is fine on first page load before any user input but doesn't work so well when they start typing because even though Algolia is returning results weighted on their search term, the shuffling means that the closest result doesn't always appear first.
So I want to unset the shuffle whenever the search input is typed into. There are a couple of other ways to refine results too, a category select and a refinement list, and it probably makes sense if the shuffling is disabled when they're used too.
So essentially, the shuffling should only occur on first page load before any user interaction.
How would I modify what I have to achieve that?