使用 ReactJS 构建自动完成文本框

Question

My idea is to mantain the list of filtered users (suggestions) as state on the component, 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.

Answer 1

Try a component from a design library, like the Material-UI autocomplete component http://www.material-ui.com/#/components/auto-complete

The dataSource attribute represents the array of autocomplete options.

Answer 2

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 component 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="autocomplete-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 autocomplete-list by this.setState({filteredList: null});

Answer 3

You might also find this one useful:

https://github.com/reactjs/react-autocomplete

Answer 4

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.