CustomSearchBox searchAsYouType={false} not Working

I am using connectSearchBox like this in React.
const CustomSearchBox = connectSearchBox(SearchBox);

And I am using Custom Search Box like this.
<CustomSearchBox searchAsYouType={false} />

And I get results every time I type in, so optional parameters not working.
Is there any way I can use SearchAsYouType parameter ?
or am I missing something important ?

I want to send query when user click submit button or hit enter.

And my SearchBox look like this. I am using material UI

const SearchBox = (({ currentRefinement, refine }) => (
    <div className="searchbox-container">
      <form>
      <div className={classes.searchIcon}>
      <IconButton type="submit">
        <SearchIcon />
      </IconButton >
      </div>
      <InputBase
        placeholder="検索する…"
        classes={{
        root: classes.inputRoot,
        input: classes.inputInput,
        }}
        type="text"
        autoComplete="off"
        value={currentRefinement}
        onChange={e => refine(e.target.value)} />
        </form>
    </div>
  ));

You can do that by not adding your event listener to the change event of the input, but rather to the submit event of the form:

const SearchBox = (({ currentRefinement, refine }) => (
    <div className="searchbox-container">
      <form onSubmit={e => {
        e.preventDefault();
        // there are multiple ways to get the value from the input,
        // querySelector is another valid option
        const value = new FormData(e.target).get('search-input');
        refine(value);
      }}>
      <div className={classes.searchIcon}>
      <IconButton type="submit">
        <SearchIcon />
      </IconButton >
      </div>
      {/* input is uncontrolled */}
      <InputBase
        placeholder="検索する…"
        classes={{
        root: classes.inputRoot,
        input: classes.inputInput,
        }}
        type="text"
        autoComplete="off"
        name="search-input"
        />
        </form>
    </div>
  ));

Note that there are more ways to do this, but this is a simple option

Hi @haroen,

Thank you for replying.

I tried this code, and it worked.

Thanks a lot!

2 Likes