Как создать динамический поисковый фильтр в JS?
Я пытаюсь внедрить фильтр поиска в reactjs, я пробовал метод привязки к событию onChange, но он срабатывал для каждой буквы. Как заставить его работать после ввода 3 букв.
var FilteredList = React.createClass({
filterList: function(event){
var updatedList = this.state.initialItems;
updatedList = updatedList.filter(function(item){
return item.toLowerCase().search(
event.target.value.toLowerCase()) !== -1;
});
this.setState({items: updatedList});
},
getInitialState: function(){
return {
initialItems: [
"Apples",
"Broccoli",
"Chicken",
"Duck",
"Eggs",
"Fish",
"Granola",
"Hash Browns"
],
items: []
}
},
componentWillMount: function(){
this.setState({items: this.state.initialItems})
},
render: function(){
return (
<div className = "filter-list">
<form>
<fieldset className = "form-group">
<input type = "text" className = "form-control form-control-lg" placeholder = "Search" onChange = {this.filterList}/>
</fieldset>
</form>
<List items = {this.state.items}/>
</div>
);
}
});
var List = React.createClass({
render: function(){
return (
<ul className = "list-group">
{
this.props.items.map(function(item) {
return <li className = "list-group-item" data-category = {item} key = {item}>{item}</li>
})
}
</ul>
)
}
});
React.render(<FilteredList/>, document.getElementById('app'));
Https://codepen.io/mtclmn/pen/QyPVJp, я пытался изменить этот код для своего случая, но я застрял с запуском его после сценария с тремя буквами.
Любая идея будет высоко оценена.
Пожалуйста, посетите справочный центр , совершите тур , чтобы узнать, что и Как спросить . Проведите небольшое исследование, поищите связанные темы на SO; если вы застряли, опубликуйте минимально воспроизводимый пример вашей попытки, отметив ввод и ожидаемый результат, желательно в Stacksnippet
@Samridh Tuladhr, добавлен пример кода
Ответы 3
Поскольку функция, которая передается свойству onChange поля ввода, вызывается каждый раз, когда вы печатаете на клавиатуре. Вы можете проверить внутри этой функции, прежде чем выполнять какие-либо изменения, которые вам нужны для обновления состояния. Если значение длины event.target.value больше или равно 3, как это
filterList: function(event){
if (event.target.value.length >= 3) {
// Here you can perform what you need
}
}
Изменена ваша функция filterList, чтобы начать поиск только тогда, когда доступно 3 символа, в противном случае возвращайте список initialItems:
filterList: function(event){
if (event.target.value.length > 2){
var updatedList = this.state.initialItems;
updatedList = updatedList.filter(function(item){
return item.toLowerCase().search(
event.target.value.toLowerCase()) !== -1;
});
this.setState({items: updatedList});
}
else{
console.info(this.state.initialItems)
this.setState({items: this.state.initialItems})
}
}
Обновлено: предыдущий ответ, опубликованный здесь, делает то же самое, что и я. Я добавил дополнительное условие else, чтобы вернуть весь список, когда в строке поиска ничего нет. Пожалуйста, измените его на else if в соответствии с вашими требованиями.
OnChange срабатывает всякий раз, когда происходит event. Поэтому, когда тег even.target.value как значения input изменяется, функция активируется. В отличие от других методов, таких как onClick или onSubmit, которые активируются после нажатия или нажатия кнопки отправки, каждое изменение обнаруживается событием onChange. Вот как отличается между onChange и onClick. Если вы хотите выполнить поиск после ввода 3 букв, есть простой способ. Условие установки value.length >= 3 было бы полезно.
Https://codepen.io/jacobkim9881/pen/LYRjLwd
Даже если подумать, это кажется прямолинейным, но как только пользователь очистит поле, мы должны вернуть исходный список выбранных элементов, чего здесь нет :) в вашем коде еще codepen.io/jacobkim9881/pen/LYRjLwd
Как @Imran Rafiq Скорее, хороший разработчик React, любезно разъясненный выше, демонстрация выше :)
Поделитесь, что вы уже пробовали. Возможно, что-то столь же простое, как не запускать функцию поиска до тех пор, пока в поле ввода не будет 3 символов, будет простым трюком для достижения того же.