VyacheslavBozere,
ввести
t
<html>
<head>
<title></title>
<style type="text/css">
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul.span {
color: red;
}
</style>
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
<script type="text/babel">
let cities = "Toronto,Edmonton,Charlottetown".split(",");
let getItems = (cities, regExp) => cities.filter(e => regExp.test(e));
let divSet = (cities) => cities.map(city => <li>{city}</li>);
class Combobox extends React.Component{
constructor(props) {
super(props);
this.state = {popular: divSet(["find city"]) };
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
let str = e.target.value.trim();
let find = ["no find"];
if(str) {
let regExp = new RegExp(str, "ig");
find = getItems(cities, regExp) || find;
}
let findCities = divSet(find)
this.setState({popular: findCities});
}
render() {
return (
<div>
<input type="text" onChange={this.handleChange} />
<ul>{this.state.popular}</ul>
</div>
);
}
}
ReactDOM.render(<Combobox />, document.getElementById('root'))
</script>
</body>
</html>