search functionality in table without clicking enter button from keyboard

Question

I am new react developer, here i have antd table with search functionality, is there an easy way to make this work without clicking 'enter' button from keyboard when searching ? for example when user starts writing 'd..' it should search it without needing to click 'enter' button, here is the code :

https://codesandbox.io/s/z3ln7y0p04?file=/src/StatusFilter.js

Answer 1

You can just use the onChange prop instead::

handleChange = (e) => {
  const searchText = e.target.value;
  const filteredEvents = eventsData.filter(({ title }) => {
    title = title.toLowerCase();
    return title.includes(searchText);
  });

  this.setState({
    eventsData: filteredEvents,
  });
};

<>
  <Search
    placeholder="Enter Title"
    onSearch={onSearch}
    onChange={onChange}
    style={{ width: 200 }}
  />
  <TitleSearch
    onSearch={this.handleSearch}
    onChange={this.handleChange}
    className={styles.action}
  />
</>;

https://codesandbox.io/s/antd-table-filter-search-forked-4731q?file=/src/TitleSearch.js:174-305