SearchBox view causing autosuggestions not appearing

Elastic Search
1

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.

                                <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>
                                    )}
                                />
2

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?
3

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.

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

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

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

5

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.

                                <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>
                                            </>
                                        )
                                    }}
                                />
6

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 and 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

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>
    </>
  );
};
1 Like
7

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

8

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