My idea is to mantain the list of filtered users (suggestions) as state on the ponent, when the input changes, the state is updated.

How can I display the filtered list below the text box? One option is 'datalist' tag (HTML5), but the list is already filtered, and part of the functionality of this tag is filtering. I can't use any library or framework.

English is not my native language, sorry if you find some mistake.

Thanks.

My idea is to mantain the list of filtered users (suggestions) as state on the ponent, when the input changes, the state is updated.

How can I display the filtered list below the text box? One option is 'datalist' tag (HTML5), but the list is already filtered, and part of the functionality of this tag is filtering. I can't use any library or framework.

English is not my native language, sorry if you find some mistake.

Thanks.

• javascript
• reactjs
• autoplete

• This link will give you the solution : stackoverflow./questions/52015562/… – Nayan K Commented Aug 25, 2018 at 8:56

4 Answers 4

Try a ponent from a design library, like the Material-UI autoplete ponent http://www.material-ui./#/ponents/auto-plete

The dataSource attribute represents the array of autoplete options.

How I did it was to pass in the dataList array as a prop and filterByField prop so that you can change what to filter, then add an event listener to the input (onChange) that passes the value to a function that filters the dataList.

onChangeInput(e) {
  const { dataList, filterByField } = this.props;
  const filteredDataList = dataList.filter(items => items[filterByField].toLowerCase().startsWith(e.target.value.toLowerCase())  );
  // update internal ponent state to trigger render of dropdown list
  this.setState({filteredList: filteredDataList});
}

I also added a check for no matches found so I can show a message:

if (filteredDataList.length === 0) {
  this.setState({noMatchFound: true});
}

Then in my render() I simply check if filteredList isn't null and show an unordered list that I use css to display below the input.

{this.state.filteredList !== null
  <ul className="autoplete-list">
    {this.filteredListMarkup()}
  </ul>
}

filteredListMarkup() then uses map to return an <li> for each item with the necessary event handlers to update the selected item into the input and close the autoplete-list by this.setState({filteredList: null});

You might also find this one useful:

https://github./reactjs/react-autoplete

Even if you could use dependencies, I tried a bunch of the top current ones and personally wasn't happy with any of them (added dependencies like jQuery, not lightweight to use/understand/customize, css challenges, etc).

In then end, I found this lightweight vanilla React typeahead tutorial (no, I didn't write the tutorial). It's quick, simple, and three's no added dependency tree weight (eg: jQuery) or dependency maintenance. This solution also easily adjusted to the newer React patterns & the libraries I was using, and I'm guessing the same would be true of the patterns/libraries you may be using. Maybe this will help you or someone else like it did me.