javascript - 如何使用 JavaScript 在我的图片库中实现多个标签搜索？

Question

我有一个带有搜索输入的图片库，用户可以在其中输入图像标题或图像标签并搜索匹配项。我现在需要能够对标签进行多次搜索。例如，如果我输入: #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() {}) 上的回调函数来完成所有可能性吗？

Answer 1

为什么不使用正则表达式。检查这是否可行。

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>