使用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});