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.