# SearchBox view causing autosuggestions not appearing

**URL:** <https://discuss.elastic.co/t/searchbox-view-causing-autosuggestions-not-appearing/295893>\
**Category:** Elastic Search\
**Tags:** elastic-app-search\
**Created:** [February 1, 2022, 12:35am UTC](https://discuss.elastic.co/t/searchbox-view-causing-autosuggestions-not-appearing/295893 "2022-02-01T00:35:40Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mecadamia.nut](https://avatars.discourse-cdn.com/v4/letter/m/e79b87/32.png) [@Mecadamia.nut](https://discuss.elastic.co/u/Mecadamia.nut)\
**Post date:** [February 1, 2022, 12:35am UTC](https://discuss.elastic.co/t/searchbox-view-causing-autosuggestions-not-appearing/295893/1 "2022-02-01T00:35:40Z")

</div>

I have the below SearchBox view, but this is causing my autocomplete suggestion does not show any suggestions even though i'm getting the suggestions from the elastic. Any suggestions please.

```auto
                                <SearchBox shouldClearFilters={false} autocompleteSuggestions={true} searchAsYouType={false} autocompleteResults={true}
                                    debounceLength={4}
                                    autocompleteMinimumCharacters={4}
                                    view={({ onChange, value, onSubmit }) => (
                                        <form onSubmit={(evt) => { inputValidation(evt, onSubmit); }}>
                                            <input type="text" value={value} placeholder={placeHolderText} onChange={(evt) => { onChange(evt.currentTarget.value); }}
                                                name="searchX" className="typeahead" style={{ width: '100%' }} />
                                            <MdOutlineSearch style={{ color: 'red', cursor: 'pointer' }} onClick={(evt) => { inputValidation(evt, onSubmit); }} />
                                        </form>
                                    )}
                                />

```

---

<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:** [February 2, 2022, 10:50am UTC](https://discuss.elastic.co/t/searchbox-view-causing-autosuggestions-not-appearing/295893/2 "2022-02-02T10:50:39Z")

</div>

hey @Mecadamia.nut

Few questions to help us figure this problem out!

- What happens if you do not specify a custom view? Does it work as expected?
- Do you see the network requests for being performed within the browser console and see the reply for the results?
- Could you share your autocomplete configuration code too?

---

<div class="post-metadata">

**Author:** ![Mecadamia.nut](https://avatars.discourse-cdn.com/v4/letter/m/e79b87/32.png) [@Mecadamia.nut](https://discuss.elastic.co/u/Mecadamia.nut)\
**Post date:** [February 4, 2022, 2:55pm UTC](https://discuss.elastic.co/t/searchbox-view-causing-autosuggestions-not-appearing/295893/3 "2022-02-04T14:55:14Z")

</div>

Thank you joe for looking into this.  
If i remove the custom view it renders correctly and is working as expected. Yes the network requests are getting fired and i see the responses from the backend for the suggestions call.

i have the below config for autosuggestions.

```auto
"autocompleteQuery": {
    "suggestions": {
      "types": {
        "documents": {
          "fields": ["title", "equipmentlist", "business_line", "reagentlist"] 
        }
      },
      "size": 5
    }
  },

```

---

<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:** [February 4, 2022, 8:11pm UTC](https://discuss.elastic.co/t/searchbox-view-causing-autosuggestions-not-appearing/295893/4 "2022-02-04T20:11:07Z")

</div>

Thanks for getting back! I believe the issue here is you're overriding the view component and your custom view component needs to handle things like autocomplete. See the default view component here [https://github.com/elastic/search-ui/blob/master/packages/react-search-ui-views/src/SearchBox.js#L12](https://github.com/elastic/search-ui/blob/master/packages/react-search-ui-views/src/SearchBox.js#L12)

What it looks like you're trying to do is override just the inputbox business logic. Theres also an inputView component prop that allows you to customise just the input view.

Hope this helps

> <https://github.com/elastic/search-ui/blob/master/packages/react-search-ui-views/src/SearchInput.js>

---

<div class="post-metadata">

**Author:** ![Mecadamia.nut](https://avatars.discourse-cdn.com/v4/letter/m/e79b87/32.png) [@Mecadamia.nut](https://discuss.elastic.co/u/Mecadamia.nut)\
**Post date:** [February 6, 2022, 4:08am UTC](https://discuss.elastic.co/t/searchbox-view-causing-autosuggestions-not-appearing/295893/5 "2022-02-06T04:08:07Z")

</div>

Thanks Joe. I'm having hard time in setting the onChange and onSubmit props. do you have any example of how this can be accomplished? when i started using the inputView..i've started getting errors like "TypeError: onChange is not a function". Appreciate your help on this.

```auto
                                <SearchBox
                                    inputView={({ getAutocomplete, getInputProps, getButtonProps, onSubmit, value, onChange }) => {

                                        return (
                                            <>
                                                <div className="sui-search-box__wrapper">
                                                    <form onSubmit={(evt) => { inputValidation(evt, onSubmit); }}>
                                                        <input type="text" value={value} placeholder={placeHolderText} onChange={(evt) => { onChange(evt.currentTarget.value); }}
                                                            name="searchY" className="typeahead" style={{ width: '100%' }} />
                                                        <MdOutlineSearch style={{ color: 'red', cursor: 'pointer' }} onClick={(evt) => { inputValidation(evt, onSubmit); }} />
                                                    </form>
                                                    {getAutocomplete()}
                                                </div>
                                            </>
                                        )
                                    }}
                                />

```

---

<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:** [February 7, 2022, 10:10am UTC](https://discuss.elastic.co/t/searchbox-view-causing-autosuggestions-not-appearing/295893/6 "2022-02-07T10:10:48Z")

</div>

So behind the scenes, the Searchbox uses the downshift-js library [https://github.com/elastic/search-ui/blob/master/packages/react-search-ui-views/src/SearchBox.js#L43](https://github.com/elastic/search-ui/blob/master/packages/react-search-ui-views/src/SearchBox.js#L43) and [https://github.com/downshift-js/downshift](https://github.com/downshift-js/downshift)

getButtonProps is a function which returns all the props required (for example onChange prop) for the button to function. If you want to put some logic in between, such as validate the input before submission, you could use the downshift extensions like this

```auto
const inputViewComponent = ({
  getAutocomplete,
  getInputProps,
  getButtonProps
}) => {
  const { ...inputProps } = getInputProps({
      onKeyDown: event => {
        if (event.key === 'Enter') {
          if (event.target.value === "badValue") {
            event.preventDefault()
            console.log("prevented from searching")
          }
        }
      },
  })

  return (
    <>
      <div className="sui-search-box__wrapper">
          <input type="text" {...inputProps} />
        {getAutocomplete()}
      </div>
    </>
  );
};

```

> **[search-ui-national-parks-example (forked) - CodeSandbox](https://codesandbox.io/s/search-ui-national-parks-example-forked-lpkk4?file=%2Fsrc%2FApp.js:4405-5049)**
>
> search-ui-national-parks-example (forked) by joemcelroy using @elastic/react-search-ui, @elastic/react-search-ui-views, @elastic/search-ui, @elastic/search-ui-app-search-connector, moment, react, react-dom, react-scripts

---

<div class="post-metadata">

**Author:** ![Mecadamia.nut](https://avatars.discourse-cdn.com/v4/letter/m/e79b87/32.png) [@Mecadamia.nut](https://discuss.elastic.co/u/Mecadamia.nut)\
**Post date:** [February 7, 2022, 2:51pm UTC](https://discuss.elastic.co/t/searchbox-view-causing-autosuggestions-not-appearing/295893/7 "2022-02-07T14:51:00Z")

</div>

Thanks a lot Joe. Appreciate you putting a sample for me. Will try this and let you know.

---

<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:** [March 7, 2022, 2:51pm UTC](https://discuss.elastic.co/t/searchbox-view-causing-autosuggestions-not-appearing/295893/8 "2022-03-07T14:51:08Z")

</div>

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