vue-instantsearch: Problems with search, letters disappear

[bmpf]

Description
When searching the first word, some letters disappear because of the high latency or big payload, is there a way of using a custom debouncer ? Or decrease the frequency of requests between typing letters.

Screenshots or Logs

Environment (please complete the following information):

• MeiliSearch version: v0.25.1
• instant-meilisearch version: v0.6.0
• vue-instantsearch version: v4.3.1

EDIT:
This "problem" only happen after updating to the latest version, before that there was no "lagging". I've been using this for an year prior to this update.

[serdarcevher]

I suffered from the same issue, managed to resolve it by using the debounced search box component provided in the Algolia documentation:
https://www.algolia.com/doc/guides/building-search-ui/going-further/improve-performance/vue/#debouncing

[bmpf]

I suffered from the same issue, managed to resolve it by using the debounced search box component provided in the Algolia documentation:

https://www.algolia.com/doc/guides/building-search-ui/going-further/improve-performance/vue/#debouncing

Does the :stalled-search-delay has the same effect? https://www.algolia.com/doc/api-reference/widgets/instantsearch/vue/#widget-param-stalled-search-delay

[curquiza]

Hello @bmpf, sorry for this issue, the maintainer of this repo (@bidoubiwa) was not available the previous week, and is still not available this week. She will come back next Monday. Sorry for this bug, be sure she will take care of this bug as a priority when she'll come back :)

[serdarcevher]

https://www.algolia.com/doc/api-reference/widgets/instantsearch/vue/#widget-param-stalled-search-delay

Nope, I had tried it first, couldn't get the desired effect. Otherwise I wouldn't bother with creating a new component.

[bmpf]

Hello @curquiza , the solution given by @serdarcevher worked.
I just had to sync the url params passing the querySearch on mounted.

<app-debounced-search-box :delay="175" :querySearch="querySearch"/>

mounted () {
        const params = new URLSearchParams(window.location.search)
        this.querySearch = params.get('products[query]')
},

[serdarcevher]

Hello @curquiza , the solution given by @serdarcevher worked. I just had to sync the url params passing the querySearch on mounted.

Weird, I didn't need to sync the URL params to make it work. Did you put it without the original ais-search-box component? This is the way I use it:

<ais-search-box placeholder="Search" class="searchbox" autofocus>
      <app-debounced-search-box :delay="200" />
</ais-search-box>

[bmpf]

@serdarcevher Yes, It wouldn't sync with the url .

<ais-search-box>
<app-debounced-search-box :delay="195" :querySearch="querySearch" :placeholder="$t('search') + translation ( '(Press \\ to focus)' , ' (Pressione \\ para focar)'  , ' (Presione \\ para focalizar)'  )"/>
</ais-search-box>

[bmpf]

I mean, on refresh, the search keyword did not appear filled in the text box.

[bidoubiwa]

Hello @bmpf and @serdarcevher what was the previous version of MeiliSearch you were using?

[bidoubiwa]

Okey! After hours of trying things out, we think it is linked to the size of the components we ask vue-instantsearch to render. Because they do not have a debouncing system (while react-instantsearch and instantsearch do have) the bug only appears in vue.

To solve the problem even faster you can reduce the paginationTotalHits which is set at 200 by default, for example by reducing it at 20. This means that the limit on every request made to meilisearch is 200. This behavior impacts the performance of search a lot. It is planned to be removed very soon.

Meanwhile, the debouncing solution suggested by Algolia for vue-instantsearch works regarding this problem.

[bmpf]

Hello @bmpf and @serdarcevher what was the previous version of MeiliSearch you were using?

Hello,

Current:
MeiliSearch version: v0.25.1
instant-meilisearch version: v0.6.0
vue-instantsearch version: v4.3.1

Previous :
MeiliSearch version: v0.20.0
@meilisearch/instant-meilisearch: ^0.4.2
vue-instantsearch: ^2.6.0

[bmpf]

To solve the problem even faster you can reduce the paginationTotalHits which is set at 200 by default, for example by reducing it at 20

I tried to reduce to 100 and the problem was still there.

This behavior impacts the performance of search a lot. It is planned to be removed very soon.

That solution would be perfect. (Add option to re-fetch on every next-page and load more.)

Meanwhile, the debouncing solution suggested by Algolia for vue-instantsearch works regarding this problem.

Yes, its the solution for now.

[bidoubiwa]

@bmpf if it's not to much to ask, i have a few more questions, if you are busy don't worry.

• Do you use filterableAttributes ? Are you using refinmentList?
• Could you try with 20 for paginationTotalHits ?
• What size is your dataset and what size is one element (approximatively), or could you show me one document?
• If you look at the network tab in the devtools of your browser, what size is your payload?

If you only have the answer to only a few questions, please feel free to ignore the others :)

edit could you also add this widget?

<ais-stats />

It should show the processing time of each search

[paligiannis]

I would suggest you to do 2 things that I have seen that the work amazingly!

<ais-search-box :class-names="{ 'ais-SearchBox': 'w-100' }"> <template v-slot="{ currentRefinement, isSearchStalled, refine }"> <div class="site-header__search"> <div class="search search--location--header"> <div class="search__body"> <form class="search__form" "> <input type="search" class="search__input w-100 text-primary" id="search__input_base" autocomplete="off" name="query" placeholder="Search here" required v-model="search_query" @input="refineSearch(refine, $event.currentTarget.value)" /> </form> <div class="search__suggestions suggestions suggestions--location--header"></div> </div> </div> </div> <span :hidden="!isSearchStalled">Loading...</span> </template> </ais-search-box>

and then use lodash debounce function

refineSearch: debounce(function (refine, value) { this.searchQuery = value; refine(value); this.setSearchQuery(value) }, 500), setSearchQuery(val) { this.search_query = val; },