algolia + reactjs: autocomplete-plugin-query-suggestions: show blank ui

[sant527]

// Autocomplete Component

import { autocomplete } from "@algolia/autocomplete-js";
import React, { createElement, Fragment, useEffect, useRef } from "react";
import { render } from "react-dom";

export function Autocomplete(props) {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) {
      return undefined;
    }

    const search = autocomplete({
      container: containerRef.current,
      renderer: { createElement, Fragment },
      render({ children }, root) {
        render(children, root);
      },
      ...props,
    });

    return () => {
      search.destroy();
    };
  }, [props]);

  return <div ref={containerRef} />;
}

and the main code

import { createQuerySuggestionsPlugin } from "@algolia/autocomplete-plugin-query-suggestions";

const searchClient = algoliasearch(
  "xxxx",
  "yyyyyyyyyyyyyyyy"
);

const querySuggestionsPlugin = createQuerySuggestionsPlugin({
  searchClient,
  indexName: "zzzzzzz",
  getSearchParams() {
    return {
      hitsPerPage: 5,
    };
  },
});


// component inside render

<Autocomplete
  openOnFocus={true}
  plugins={[querySuggestionsPlugin]}
  placeholder={"Search"}
/>

I see the search results as

[Haroenv]

I recreated your index in a sandbox and get a working app: https://codesandbox.io/s/focused-keldysh-logsv?file=/src/App.tsx

Is it possible your index isn't one that's create with the query suggestions feature?

[sant527]

This is my index created using query suggestions feature

and also added one of my index as source

Still i dont see any suggestions

[sant527]

I recreated your index in a sandbox and get a working app: https://codesandbox.io/s/focused-keldysh-logsv?file=/src/App.tsx

Is it possible your index isn't one that's create with the query suggestions feature?

Also is it possible to see the index used for this codesandbox. How it looks and what features are used

[Haroenv]

The index is also a query-suggestions one. Could you give appId/indexName/search api key for this index so we can see what's going on? (can also be done via support@algolia.com) @sant527

[Daniel-Ateles]

If you make the search window small so the detached mode kicks in you can't select any suggestions. The search input field is left empty.

[sarahdayan]

Hey @sant527, could you please update the sandbox provided by @Haroenv with your own credentials (as long as you use your search-only API key it's safe to share) and send the updated one so we can properly investigate?

If you still don't feel comfortable sharing here, I recommend contacting support.