# Elasticsearch connector react-search ui

**URL:** <https://discuss.elastic.co/t/elasticsearch-connector-react-search-ui/328849>\
**Category:** Elastic Search\
**Created:** [March 29, 2023, 3:40pm UTC](https://discuss.elastic.co/t/elasticsearch-connector-react-search-ui/328849 "2023-03-29T15:40:22Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![VV1002](https://avatars.discourse-cdn.com/v4/letter/v/9dc877/32.png) [@VV1002](https://discuss.elastic.co/u/VV1002)\
**Post date:** [March 29, 2023, 3:40pm UTC](https://discuss.elastic.co/t/elasticsearch-connector-react-search-ui/328849/1 "2023-03-29T15:40:22Z")

</div>

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](https://docs.elastic.co/search-ui/tutorials/elasticsearch)  
[SearchBox | Elastic docs](https://docs.elastic.co/search-ui/api/react/components/search-box)  
[search-ui-examples - CodeSandbox](https://codesandbox.io/s/search-ui-examples-wrjpz?file=/src/pages/elasticsearch/index.js)

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

```auto
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"
                }
              }
            }
          }
        },

```

```auto
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

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/d/7/d7b8be4ea0e4cf78ea12a0f7066e5ae6e67bf4ed.jpeg)

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.

---

<div class="post-metadata">

**Author:** ![joemcelroy](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/joemcelroy/32/103757_2.png) [@joemcelroy](https://discuss.elastic.co/u/joemcelroy)\
**Post date:** [March 29, 2023, 7:39pm UTC](https://discuss.elastic.co/t/elasticsearch-connector-react-search-ui/328849/2 "2023-03-29T19:39:26Z")

</div>

Responded on slack but you need to tweak the presentation of the autocomplete. Docs should help [Autocomplete | Elastic docs](https://docs.elastic.co/search-ui/solutions/ecommerce/autocomplete)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [April 26, 2023, 7:40pm UTC](https://discuss.elastic.co/t/elasticsearch-connector-react-search-ui/328849/3 "2023-04-26T19:40:15Z")

</div>

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