Elasticsearch connector react-search ui

I have ES 8.4 with Mappings and data in the backend and trying to connect to react front-end with react-search-ui library to implement Title suggestions and autocomplete

sample references : Search UI with Elasticsearch | Elastic docs
SearchBox | Elastic docs
search-ui-examples - CodeSandbox

I have tried pretty much the kept the sandbox code as the base and have tried out the autocomplete and completion suggester.

Mappings:

"title":{
          "properties":{
            "fr":{
              "type":"text",
              "analyzer":"french",
              "fields":{
                "raw":{
                  "type":"keyword",
                  "index":true
                },
                "title_as_you_type":{
                  "type": "search_as_you_type",
                  "max_shingle_size": 3
                },
                "title_suggest":{
                  "type":"completion"
                }
              }
            },
            "en":{
              "type":"text",
              "analyzer":"english",
              "fields":{
                "raw":{
                  "type":"keyword",
                  "index":true
                }
                "title_as_you_type":{
                  "type": "search_as_you_type",
                  "max_shingle_size": 3
                },
                "title_suggest":{
                  "type":"completion"
                }
              }
            }
          }
        },
React Config and Searchbox code:
config:
const config = {
  debug: true,
  alwaysSearchOnInitialLoad: false,
  apiConnector: connector,
  hasA11yNotifications: true,
  searchQuery: {
    filters: [],
    search_fields: {
      act: {
        weight: 3
      },
      title: {},
    },
    result_fields: {
      "title.en": {
        raw: {}
      },
      "alias.en": {
        raw: {}
      }
    },
  },
  autocompleteQuery: {
    results: {
      search_fields: {
        "title.en.title_as_you_type": {
          weight: 3
        }
      },
      resultsPerPage: 5,
      result_fields: {
        title: {
          en: {
            raw: {}
          }
        },
        "source.en": { raw: {} }
      }
    },
    suggestions: {
      types: {
        results: {
          fields: ["title.en.title_suggest"]
        }
      },
      size: 4
    }
  }
};

template:
<SearchBox
  autocompleteMinimumCharacters={3}
  autocompleteResults={{
  linkTarget: "_blank",
  sectionTitle: "Results",
  titleField: "title.en",
  urlField: "source.en",
  shouldTrackClickThrough: true,
  // clickThroughTags: ["test"]
  }}
  autocompleteSuggestions={true}
  debounceLength={0}
/>

Screenshot with devtools is attached to the ticket

The Results shows the place holder to the title which is displayed in the dev tools but not in the search box. Any help is appreciated.

Responded on slack but you need to tweak the presentation of the autocomplete. Docs should help Autocomplete | Elastic docs

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.