使用ReactJS构建自动填充文本框

Question

我的想法是将过滤后的用户列表（建议）作为组件状态，当输入发生更改时，状态会更新。

如何显示文本框下面的过滤列表？ 其中一个选项是'datalist'标记（HTML5），但该列表已被过滤，并且该标记的部分功能正在过滤。 我无法使用任何库或框架。

英语不是我的母语，对不起，如果你发现一些错误。

谢谢。

Answer 1

从设计库尝试的成分，如材料的UI自动填充部件http://www.material-ui.com/#/components/auto-complete

dataSource的属性表示的自动完成选项的阵列。

Answer 2

您也可能会发现这个有用：

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

Answer 3

我怎么做的是dataList阵列作为道具和filterByField道具的通过，使得您可以更改过滤一下，然后加一个事件监听器（onChange）将值传递给过滤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}); 
} 

我还添加了对未发现问题，所以我可以显示信息一致的检查：

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

然后在我的渲染（）我只是检查是否filteredList不为空，并显示一个无序列表我使用css在输入下方显示。

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

filteredListMarkup()然后使用映射到与必要的事件处理为每个项目返回<li>来更新所选择的项目到输入和关闭autocomplete-list通过this.setState({filteredList: null});