Query params in autocomplete

[JyYong93]

Description

Hi, I am trying to implement autocomplete using algolia's autocomplete and typesense. These are two links that I gotten the code snippets from https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/react-renderer?file=/src/Autocomplete.tsx https://www.algolia.com/doc/ui-libraries/autocomplete/guides/creating-a-renderer/

Current code snippet: https://gist.github.com/JyYong93/0d0d5e31d1468378e2a7160cc6e5bb0d

The autocomplete is able to fetch from typesense on the initial render but no matter how I tried to update the query subsequently, the autocomplete does not send another request to typesense. I did check the network requests in console but the current search looks something like [{ "query_by": "name", "sort_by": "", "highlight_full_fields": "name", "collection": "posts", "q": "*", "facet_by": "", "filter_by": "", "page": 1, "per_page": 5 }]

The query params did not update so am I missing something obvious in the current code?

I am using

typesense-instantsearch-adapter: 1.2.2
next: 11.0.1
@algolia/autocomplete-js: 1.2.0

Hope someone can point me in the right direction. Thank you.

Steps to reproduce

Using the current code snippet, only initial data is fetched from typesense but does not request from typesense again when the query is updated.

Expected Behavior

Query params does update. [{ "query_by": "name", "sort_by": "", "highlight_full_fields": "name", "collection": "posts", "q": "newQuery", "facet_by": "", "filter_by": "", "page": 1, "per_page": 5 }]

Actual Behavior

Query params does not update. [{ "query_by": "name", "sort_by": "", "highlight_full_fields": "name", "collection": "posts", "q": "*", "facet_by": "", "filter_by": "", "page": 1, "per_page": 5 }]

Metadata

Typesense Version: typesense-instantsearch-adapter: 1.2.2 typesense: v0.20.0

[jasonbosco]

@JyYong93 autocomplete.js supports pulling data from arbitrary sources, so you don't need to use this adapter for it. You can directly use the getSources method: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#using-asynchronous-sources

Inside that method, you'd want to use typesense-js to make a search API call, get the results and return that to autocomplete.js.

[JyYong93]

@jasonbosco Hi, thanks for the reply. I tried out the approach you mentioned but encountered CORS error. According to https://typesense.org/docs/0.20.0/guide/configure-typesense.html#using-a-configuration-file & https://forum.bubble.io/t/typesense-instead-of-algolia/57479/22, I need to enable-cors in order to use Typesense directly from browser. So I tried changing my current config file from:

Current

[server]

api-address = 0.0.0.0
api-port = 8108
data-dir = /var/lib/typesense
api-key = key
log-dir = /var/log/typesense

Updated

[server]

api-address = 0.0.0.0
api-port = 8108
data-dir = /var/lib/typesense
api-key = key
log-dir = /var/log/typesense
enable-cors = true

and running the command subsequently (using DEB package),

sudo systemctl restart typesense-server.service

network requests:

Which still did not work for me. This seems to be for the server, what is the correct way to enable CORS for the server or the search-only key that I have generated?

Edit

Silly me had another enable CORS in my nginx config which was causing the problem: Removing the additional add_header Access-Control-Allow-Origin *; solved the problem. Closing the issue now, sorry for the trouble 😅.