Я пытаюсь реализовать функцию поиска, которая возвращает поиск, в котором есть поисковое слово в указанном массиве. Скажем, в коллекции есть [aa, ab, aaa], а поисковое слово - «a». В этом случае верните объект для отображения. Поскольку по крайней мере одна из строк в массиве имеет "a".
Структура данных
[
{
name:'aa',
searchWords:['aa','ab','bc'] <- I want to use this array for search
},
{
name:'bb',
searchWords:['bb','bc','de'] <- I want to use this array for search
},
...
]
Я попытался решить проблему с помощью include (), filter (), indexOf (). Однако он по-прежнему ничего не возвращает или возвращает данные, когда поисковое слово точно совпадает. Как исправить код для достижения прицеливания? Заранее спасибо!
эта часть работает хорошо
let filterStudents = students;
if (searchName.length > 0 && searchTag.length === 0) {
filterStudents = students.filter((student) => {
if (
student.firstName.toLowerCase().includes(searchName.toLowerCase())
|| student.lastName.toLowerCase().includes(searchName.toLowerCase())
) {
return true;
}
return false;
});
Проблема возникает в этой части
} else if (searchName.length === 0 && searchTag.length > 0) {
filterStudents = students.filter(
(student) => {
console.log(student.tags);
student.tags.filter((tag) => {
console.log(tag);
tag.indexOf(searchTag) > -1;
});
},
);
} else if (searchName.length > 0 && searchTag.length > 0) {
} else {
console.log('both');
}
2 ответа
Вы не return
из обратных вызовов filter
В качестве примечания есть также String#includes
:
filterStudents = students.filter(student =>
student.tags.some((tag) => tag.includes(searchTag))
);
Если вы хотите искать совпадения только тогда, когда соответствующие searchTag
или searchName
заполнены, используйте условный оператор внутри обратного вызова filter
, чтобы проверить, следует ли выполнять проверку фильтра:
const students = [
{
name:'aa',
searchWords:['aa','ab','bc']
},
{
name:'bb',
searchWords:['bb','bc','de']
},
];
const doFilter = () => {
const [searchName, searchTag] = [...document.querySelectorAll('input')]
.map(input => input.value.toLowerCase());
const filtered = students.filter(({ name, searchWords }) => (
(searchName ? name.toLowerCase().includes(searchName) : true) &&
(searchTag ? searchWords.some(word => word.toLowerCase().includes(searchTag)) : true)
));
code.textContent = JSON.stringify(filtered);
};
window.addEventListener('change', doFilter);
<input placeholder="searchName">
<input placeholder="searchTag">
<div>
<code id="code"></code>
</div>
searchWords.some(word => word.toLowerCase().includes(searchTag))
, где searchTag
уже в нижнем регистре (см. Обратный вызов .map
)
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Обратите внимание, что JavaScript — это НЕ Java. Включите все теги, относящиеся к вашему вопросу: например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [стройный] и т. д.
return
.