我有一个带有搜索输入的图片库,用户可以在其中输入图像标题或图像标签并搜索匹配项。我现在需要能够对标签进行多次搜索。例如,如果我输入: #tree -> 结果将是标签中包含“tree”(特别是)的所有图像,而不是部分包含该单词的图像,因为标签搜索应该是特定的。我需要能够输入:#tree,#sky -> 并输出所有包含“树”和“天空”的图像。到目前为止,我的代码仅执行第一个示例。
HTML:
<div class="searchBtn">
<input type="text" id="inputValue" placeholder="Search by name or #tag">
<button onclick="Search()" type="button">Search</button>
</div>
JS:
let filterSearch = $("#inputValue").val().toLowerCase();
function findAllImages(filter, start, itemsCount) {
let photos = [];
let tagSign = "#";
const searchByTag = filterSearch [0] === tagSign;
let searchCondition = searchByTag ? filterSearch.slice(1) : filter;
let newFiltered = imageArrayPhotos.filter(
searchByTag ? image => image.tag.indexOf(searchCondition) >= 0 :
image => image.title.toLowerCase().indexOf(searchCondition) >= 0);
for (let i = start; i < newFiltered.length; i++) {
photos .push(newFiltered [i]);
if (photos.length >= numberOfImages) {
break;
}
}
return photos ;
}
我可以使用 let newFiltered = imageArrayPhotos.filter(function() {})
上的回调函数来完成所有可能性吗?
最佳答案
为什么不使用正则表达式
。检查这是否可行。
let searchByTag = true;
let imageArrayPhotos = [{
tag: 'tree',
title: 'tree'
},
{
tag: 'forest',
title: 'tree'
},
{
tag: 'sky',
title: 'sky'
},
{
tag: 'bird',
title: 'bird'
},
{
tag: 'watertree',
title: 'sky'
},
];
let filterSearch = '';
let searchCondition = '';
let pattern;
let newFiltered = [];
function Search() {
newFiltered = [];
filterSearch = '';
searchCondition = '';
filterSearch = $("#inputValue").val();
filterSearch = filterSearch.split(',');
//searchCondition = searchByTag ? filterSearch.slice(1) : filter;
//newFiltered = imageArrayPhotos.filter(checkFilter);
filterSearch.forEach(function(item) {
item = $.trim(item);
searchByTag = item[0] == "#";
pattern = new RegExp("^" + $.trim(item).replace(/#/g, '') + "$");
let itemData = imageArrayPhotos.filter(checkFilter);
if (itemData.length > 0) {
newFiltered = newFiltered.concat(itemData);
}
});
console.log(newFiltered);
}
function checkFilter(image) {
return searchByTag ? pattern.test(image.tag) :
pattern.test(image.title)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="searchBtn">
<input type="text" id="inputValue" placeholder="Search by name or #tag">
<button onclick="Search()" type="button">Search</button>
</div>
关于javascript - 如何使用 JavaScript 在我的图片库中实现多个标签搜索?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58817649/