javascript - Building an autocomplete textbox with ReactJS - Stack Overflow

admin管理员组

文章数量:1404567

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

Share Improve this question Follow asked Feb 14, 2017 at 22:08 Nicolás GiossaNicolás Giossa 4111 gold badge11 silver badge66 bronze badges 1

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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

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.

本文标签： javascriptBuilding an autocomplete textbox with ReactJSStack Overflow