Всех приветстую, подскажите пож-та в чем суть ошибки. Делаю combobox в react выполняю поиск регулярными выражениями, в файле json. Данные беру из onChange тэга input. Поиск выполняется успешно, но если будет пробел или два пробела, то нет. Если удаляю текст в input окне то выпадает весь список. В консоли e.target.value после удаления строки в input, через который беру значения для регулярного выражения вот такое : Ввожу "по" в input ( /по/gi/) а удаляю "по"
((? :)/gi)
.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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>
</head>
<body>
<div id="root">
</div>
<script type="text/babel">
let arr = [".Дом.Земля.Вода.Ведро.Столб"];
//Ищем данные в JSON
function getItems(items, value) {
let regExp = new RegExp(value, "gi");
let JSONparse = /\.+/g;//Деление каждого JSON
let match;
let arrayOfMatches = [];
let getCities = [];
//JSON успешно спарсился
while (match = JSONparse.exec(items)) {
arrayOfMatches.push(match[0]);
}
for(let el of arrayOfMatches){
if (regExp.test(el)){
getCities.push(el);
}
}
return getCities;
}
function divSet(item) {
let list = item.map(a =>
<li>{a}</li>
);
return <ul>{list}</ul>;
}
class Combobox extends React.Component{
constructor(props) {
super(props);
this.state = {popular: null }; // ничего
this.openHead = this.openHead.bind(this);
this.closeHead = this.closeHead.bind(this);
this.handleChange = this.handleChange.bind(this);
}
openHead() {
let popularItems = divSet(arr);
this.setState({value: this.state.value,
popular: popularItems});
}
closeHead() {
this.setState({value: this.state.value,
popular: null});
}
*!*
handleChange(e) { // change input value
let regExp = new RegExp(e.target.value, "ig");
console.log(regExp);
console.log(e.target.value);
let find = getItems(arr, regExp);
let findCities = divSet(find);
this.setState({popular: findCities});
}
*/!*
render() {
return (
<div>
<input type="text" value={this.state.value} onClick={this.openHead} onBlur={this.closeHead} onChange={this.handleChange} />
<div>{this.state.popular}</div>
</div>
);
}
}
ReactDOM.render(
<Combobox />,
document.getElementById('root')
)
</script>
</body>
</html>